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

知了ing

浏览: 228080 次
性别:
来自: 上海

最近访客更多访客>>

xcarj

cui.ao

smallswan

xiaomabobo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery
javascript

jquery css html

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，附件为所需素材和效果图