jQuery 插件练习多选下拉列表

浏览数：21 / 时间：2015年06月09日

页面展示效果如下：

插件代码如下：

1	`ccombobox.js`

(function($) {
    /*
    功能：实现一个下拉列表，此下拉列表中的数据可以多选
    可以设置 1）下拉列表的宽度，2）下拉表面板的高度 
    3）显示的数据 数据格式如下
    [
    {value:"01",text:"立即生效"},
    {value:"02",text:"下月生效"},
    {value:"03",text:"前台录入"}
    ]
     
    */
    $.fn.ccombobox = function() {
        var 
method = arguments[0];
        if 
($.fn.ccombobox.methods[method]) {
            method = $.fn.ccombobox.methods[method];
            arguments = Array.prototype.slice.call(arguments, 1);
        } else 
if (typeof 
method === "object" 
|| !method) {
            method = $.fn.ccombobox.methods.init;
        } else 
{
            $.error("Method " 
+ method + " does not exist!");
            return 
this;
        }
        return 
method.apply(this, arguments);
    };
     
    $.fn.ccombobox.methods = {
        init : function() {
            var 
ops = $.extend({}, $.fn.ccombobox.defaults, arguments[0] || {});
            return 
$(this).each(function() {
                var 
sel = $(‘<select id="‘+ ops.id +‘" style="width:‘+ops.width+‘px"></select>‘);
                var 
dat = ops.data;
                console.log(dat);
                var 
j=0;
                var 
v_sel_cont ="";
                for 
(j=0; j< dat.length; j++)
                {
                    v_sel_cont += ‘<input type="‘ 
+ ops.type + ‘" value="‘ 
+dat[j].value +‘"><span>‘+dat[j].text +‘</span><br/>‘
                }
                 
                var 
sel_cont=$(‘<div id="‘ 
+ ops.id+‘_cont"‘+‘>‘+
                                v_sel_cont +
                             ‘</div>‘);
                              
                $("body").append(sel_cont)
                $(this).append(sel);
                 
                $(‘#‘+ops.id).combo({
                        editable:ops.editable,
                        panelHeight:ops.panelHeight
                    });
                     
                $(‘#‘+ops.id + ‘_cont‘ 
).appendTo( $(‘#‘+ops.id).combo(‘panel‘ 
) );
             
             
                var 
sel_cont_input = $(‘#‘+ops.id + ‘_cont‘ 
+ ‘ input‘);
                sel_cont_input.click(function(){
                    var 
objs = sel_cont_input;
                    console.log(objs);
                    var 
i ;
                    var 
t ="" 
;
                    var 
v ="" 
;
                    for(i=0; i<objs.length; i++)
                    {
                        var 
obj = objs[i];
                        console.log(obj);
                        if("checked" 
== $(obj).attr("checked") )
                        {
                            t += $(obj).next("span").text() + ",";
                            v += $(obj).val() +",";
                        }
                         
                    }
                    if("" 
!= t)
                    {
                        t = t.substr(0, t.length-1);
                        v = v.substr(0, v.length-1);
                    }
                    console.log(t);
                    console.log(v);
                    $(‘#‘+ops.id).combo("setText",t).combo("setValue",v);
                    $(‘#‘+ops.id).combo(‘hidePanel‘);
                });
             
            });
        }
    };
     
    $.fn.ccombobox.defaults = {
        id : "",
        type: "checkbox",
        data:{},
        width:200,
        panelHeight:80,
        editable:false
    };
     
})(jQuery);

　　下拉列表数据文件：data.js

var 
DATA = DATA || {};
 
DATA.efftype=[
    {value:"01",text:"立即生效"},
    {value:"02",text:"下月生效"},
    {value:"03",text:"前台录入"}
];
 
DATA.exptype=[
    {value:"01",text:"立即失效"},
    {value:"02",text:"月底失效"},
    {value:"03",text:"前台录入"}
];

　　页面展示代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" 
content="text/html; charset=gbk" 
/>
        <link rel="stylesheet" 
type="text/css" 
href="js/easyui/themes/default/easyui.css"/>
        <link rel="stylesheet" 
type="text/css" 
href="js/easyui/themes/icon.css"/>
        <script type="text/javascript" 
src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" 
src="js/easyui/jquery.easyui.min.js"></script>
        <script type="text/javascript" 
src="style/js/data.js"></script>
        <script type="text/javascript" 
src="style/js/plugin/ccombobox.js"></script>
        <script>
            $(function(){
                $("#test").ccombobox({
                    id : "efftype",
                    data:DATA.efftype,
                    width:300,
                    panelHeight:100
                });
                $("#test2").ccombobox({
                    id : "exptype",
                    data:DATA.exptype,
                    width:300,
                    panelHeight:100
                });
              
            });
        </script>
        <title>test</title>
 
    </head>
    <body >
        <div id="test"></div>
        <div id="test2"></div>
    </body>
</html>