`

jquey写的select下拉插件 解决了自带option宽度不能改变的问题

阅读更多


1,html代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/selectAuto.js"></script>
    <link type="text/css" href="css/selectAuto.css" rel="stylesheet"/>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#selectId").selectAuto({
                title:"所有分类",
                width:200,
                height:200,
                data: [
                    {key: "0", value: "所有分类"},
                    {key: "1", value: "测试1"},
                    {key: "2", value: "测试2"},
                    {key: "3", value: "测试3"},
                    {key: "4", value: "测试4"}
                ],
                callback:function(){
                },
                onSelect:function(key,val){
                    alert(key);
                }
            });
        });
    </script>
</head>
<body>
        <div  id="selectId"></div>
</body>
</html>

2,js代码
(function ($) {
    $.fn.selectAuto = function(_4b,_4c){
        if(typeof _4b=="string"){
            var _4d=$.fn.selectAuto.methods[_4b];
            if(_4d){
                return _4d(this,_4c);
            }
        }
        _4b=_4b||{};
        var defaults = {
            title:"",//下拉提示
            width: 200,
            height: 150,
            url:null,    //远程接口加载数据
            type:"get", //接口调用方式 默认是get方式
            dataType:"json",//数据返回格式 默认为json格式
            param:null,
            data:null,    //加载本地数据
            callback:null, //自定义回调方法
            locationStyle:{left: "3px", top:"26px"},//默认位置
            onSelect:function(){}  //下拉选中事件
        }
        var options = $.extend(defaults, _4b);
        this.each(function(){
            var thisSelect=$(this);
            var _ids=thisSelect[0].id;
            thisSelect[0].style.position="relative";
            var html='<span id="'+_ids+'_select_title_span"  class="select_title_span" style="width:'+options.width+'px;"> ' +
                        ' <span id="'+_ids+'_select_title" class="select_title" style="width:'+options.width+'px;">'+options.title+'</span>'+
                        ' <b class="select_icon"></b>'+
                      '</span>'+
                      '<div id="'+_ids+'_option_box_div" class="option_box_div" style="display:none;width:'+(options.width+10)+'px;">'+
                       '  <span id="'+_ids+'_data_li" style="width:'+(options.width+20)+'px;height:'+options.height+'px;">'+
                        ' </span></div>';
            thisSelect.empty().append(html);
            $("#"+_ids+"_option_box_div").css(options.locationStyle);
            if(options.data!=null){
                $.fn.selectAuto.methods. _5d(_ids,options.data);
            }else{
                if(options.url){
                    $.ajax({type:options.type,url:options.url,data:options.param,dataType:options.dataType,success:function(_d){
                        $.fn.selectAuto.methods. _5d(_ids,_d);
                    },error:function(){
                    }});
                }
            }
            if(typeof options.callback=="function"){
                options.callback();
            }
            thisSelect.find("span#"+_ids+"_select_title_span").bind("click", function () {
                if($(this).next().is(":hidden")){
                    $(this).next().show();
                    $("#"+_ids+"_option_box_div span p").each(function(i,item){
                        if($("#"+_ids+"_select_title_span>span").text() == $(this).attr('title')){
                            $(this).addClass("option_selected");
                        }else{
                            $(this).removeClass("option_selected");
                        }
                    })
                }else{
                    $(this).next().hide();
                }
            });
            thisSelect.find("div#"+_ids+"_option_box_div>span>p").bind("click", function () {
                var $title=$("#"+_ids+"_select_title");
                $title.html($(this).html());
                $title.attr("valueId",$(this).attr("key"));
                $("#"+_ids+"_option_box_div").hide();
                if(typeof options.onSelect=="function"){
                    options.onSelect($(this).attr("key"),$(this).html());
                }
            });
        });
    };
    $.fn.selectAuto.methods={
        setValue:function(_this,data){
            var $title=$("#"+_this[0].id+"_select_title");
            var key,value;
            if(typeof data=="string"){
                key=data;value=data;
            }else if(typeof data=="object"){
                key=data.key;value=data.value;
            }
            $title.html(value);
            $title.attr("valueId",key);
            $(".option_box_div ul li p").each(function(i,item){
                if(value == $(this).attr('title')){
                    $(this).addClass("option_selected");
                }else{
                    $(this).removeClass("option_selected");
                }
            });
        },getValue:function(_this){//获取选中的值
            return  $("#"+_this[0].id+"_select_title").attr("valueId");
        },getText:function(_this){//获取选中的显示值
            return  $("#"+_this[0].id+"_select_title").text();
        },loadData:function(_this,data){
            _5d(_this[0].id,data);
        },clearData:function(_this){
            $("#"+_this[0].id+"_data_li").empty();
        },_5d:function(_i,_d){
            var html="";
            $.each(_d, function(key, d){
                html+=' <p key="'+ d.key+'" title="'+ d.value+'">'+ d. value+'</p>';
            });
            $("#"+_i+"_data_li").empty().append(html);
        }
    }
})(jQuery);

3,css代码
.select_title_span{
    display:inline-block; height:16px; padding:3px 10px 4px 10px; border:1px solid #cccccc;
    line-height:16px; outline:0 none;  background-color:#ffffff; cursor:pointer;
    margin-right:5px;position:absolute;
}
.select_icon{
    display:inline-block; width:14px;height:8px; overflow:hidden;
    background:url(../img/bg_dropd.png) no-repeat 0 0;
    float:right;
    margin-top: 4px;;
}
.option_selected{background-color:#008573; color:#ffffff;}
.option_box_div{ position:absolute;border: 1px solid #aaaaaa;background-color: #ffffff;}
.option_box_div span{float:left;*position:relative;overflow-x: hidden;overflow-y:scroll; }
.option_box_div span p{cursor:pointer;}

4,附件为所需素材和效果图
  • 大小: 2.8 KB
  • 大小: 2.3 KB
分享到:
评论

相关推荐

    固定宽度下拉列表select中option内容显示不全问题解决方法

    总的来说,处理固定宽度下拉列表`&lt;select&gt;`中`&lt;option&gt;`内容显示不全的问题需要结合HTML、CSS和JavaScript的知识。开发者需要了解浏览器对`&lt;select&gt;`元素的限制,然后根据需求选择最合适的解决方案,无论是使用现有...

    jQuery模拟select下拉框插件.zip

    &lt;script src="jquery.select仿生插件.js"&gt; &lt;style src="jquery.select仿生插件.css"&gt; $(document).ready(function() { $("#customSelect").selectPlugin(); // 调用插件方法 }); ``` 在`jiaoben5932`这个文件中...

    jquery select插件带搜索框的下拉选择框代码

    在本文中,我们将深入探讨如何使用jQuery的"searchableSelect"插件来创建一个具有搜索功能的下拉选择框。这个插件对于那些需要在大量选项中快速查找和选择的项目非常有用,它大大提升了用户体验。 首先,让我们了解...

    jQuery Select下拉菜单插件.zip

    《jQuery Select下拉菜单插件深度解析》 在网页开发中,下拉菜单是一个不可或缺的交互元素,它能够有效地组织和展示大量选项,提供简洁的用户界面。jQuery作为一个强大的JavaScript库,提供了丰富的插件来增强原生...

    jquery实现select带模糊搜索下拉选择框

    然而,原生的 `select` 元素并不支持模糊搜索功能,所以我们需要借助 `jQuery` 和 CSS 来增强其功能。 1. **引入资源**: 在项目中,你需要引入 `jQuery` 库以及自定义的 CSS 和 JavaScript 文件。假设我们有以下...

    jquery下拉菜单插件SelectMenu

    **jQuery下拉菜单插件SelectMenu详解** 在网页开发中,下拉菜单是常见的交互元素,用于提供多种选择项供用户进行操作。`SelectMenu.js` 是一款基于 jQuery 的高效下拉菜单插件,它提供了丰富的特性,使开发者能够...

    jquery如何自定义select下拉样式

    首先,要自定义`&lt;select&gt;`下拉样式,我们可以借助jQuery插件,如`Select2`或`Chosen`。这些插件提供了丰富的自定义选项,能够轻松地改变下拉列表的外观和行为。以`Select2`为例,它允许我们设置选择框的宽度、字体、...

    jquery 超级select插件 v4.0版本

    考虑到实际项目中可能面临的浏览器兼容性问题,jQuery超级Select插件v4.0版本致力于兼容主流的现代浏览器,同时也尽可能对旧版浏览器提供支持。此外,它在性能上做了优化,如延迟初始化、虚拟DOM技术等,以确保在大...

    jQuery模拟Select下拉菜单选中添加代码

    在本文中,我们将深入探讨如何使用jQuery来模拟一个具有选中效果和搜索功能的Select下拉菜单,这在多选场景中非常有用。 首先,我们需要理解原生HTML的`&lt;select&gt;`元素及其`&lt;option&gt;`子元素。`&lt;select&gt;`用于创建一个...

    jQuery Select 下拉单选框模拟插件

    "jQuery Select 下拉单选框模拟插件"就是这样的解决方案,它通过模拟下拉框的行为,实现了定制化和多样的设计选项,使用户在选择时有更舒适的体验。 该插件的核心功能包括: 1. **自定义样式**:允许开发者使用CSS...

    jquery.multiselect 下拉多选插件 下拉复选框插件

    jQuery Multiselect插件,正如其名,为开发者提供了一个功能强大的下拉多选解决方案,它使得复选框在有限的空间内展现得既美观又实用。这个插件不仅提升了用户体验,同时也简化了开发者的代码实现,让复杂的多选功能...

    jquery下拉列表插件

    8. **API控制**:开发者可以通过调用插件提供的API方法来动态改变下拉列表的状态,例如`selectBox('refresh')`刷新列表,`selectBox('disable')`禁用插件等。 在实际应用中,`selectBox`插件通常与HTML结构配合使用...

    jquery 封装select实现select自定义样式插件jquery.easydropdown.min.js

    这里我们要探讨的是一个名为`jquery.easydropdown.min.js`的插件,它能帮助开发者轻松地为Select元素添加自定义样式,提高网页的交互体验。 `jquery.easydropdown.min.js`是一个轻量级的jQuery插件,它的主要功能是...

    用jquery获取select标签中选中的option值及文本的示例

    当用户改变下拉列表中的选中项时,onchange事件被触发,随后执行doSome()函数。这允许我们在用户交互后立即获取选中项的信息。 6. HTML和JavaScript的结合: - 示例展示了一个综合使用HTML和JavaScript(通过...

    jquery改变select下拉控件,且有左右点击按钮

    本篇文章将详细讲解如何使用jQuery来改变一个`select`下拉控件,并添加左右点击按钮以实现选项切换的功能。这个功能在网页交互设计中常见,能提升用户体验,使用户更便捷地浏览和选择下拉列表中的项目。 首先,我们...

    jquery下拉框选择select美化插件FancySelect.js.zip

    在这个场景中,"jquery下拉框选择select美化插件FancySelect.js.zip" 提供了一个解决方案,专门针对HTML中的`&lt;select&gt;`元素进行美化,提升网页的视觉体验。 `&lt;select&gt;`是HTML中用于创建下拉列表的标签,但其默认...

    jQuery下拉多列插件

    为了解决这一问题,jQuery 下拉多列插件应运而生,它能将长列表拆分为多列,提高用户的浏览和选择效率。本文将详细介绍此类插件的核心原理,并通过实例解析其应用。 首先,我们来理解jQuery下拉多列插件的基本概念...

    jQuery自定义select下拉菜单

    在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互。...通过查看这些文件,你可以更好地理解并应用上述步骤,从而在自己的项目中实现jQuery自定义select下拉菜单。

    Jquery操作Select option整理

    ### jQuery 操作 Select Option 整理 #### 一、引言 在Web开发中,`&lt;select&gt;`元素作为用户交互的重要部分,常用于提供一系列选项供用户选择。jQuery作为一种流行的JavaScript库,极大地简化了DOM操作的过程,使得...

    jquery select2组件

    `jQuery Select2`是一款强大的、高度可定制的下拉选择框插件,它在原生HTML `&lt;select&gt;` 元素的基础上提供了丰富的功能和优秀的用户体验。这款组件广泛应用于网页开发中,使得传统的单选或多选下拉菜单变得更加美观且...

Global site tag (gtag.js) - Google Analytics