jQuery實作input下拉多選框

直接上js代碼：

/**
 * 下拉多選框
 * yanglei
 * 2016-01-25
 * 定義倆個html，input，一個是隐藏屬性用來填數值，一個用來顯示内容
 */
    !(function ($) {
    	 $.fn.extend({
             multipleDropList : function(options){
                 var op = $.extend({
                	 wraperClass: "wraper", 
                	 width: "auto", 
                	 height: "auto", 
                	 data: "", 
                	 selected: "", 
                	 selectModel: "single", 
                	 selectType : "",
                	 beforeSelectedHandler : null,
                	 afterSelectedHandler : null
                 },options);
                 
                 return this.each(function(){
                     var $this = $(this);
                     op.width = $this.width();
                     //op.height = $this.height()*op.data.length + 10;

                     var $tp = $(this).prev();
                     var conSelector = "#" + $this.attr("id") + ",#" + $tp.attr("id");
                     //input外層包裝兩層div，最外層div加樣式wraper
                     var $wraper = $(conSelector).wrapAll("<div></div>").parent().addClass(op.wraperClass);
                     //如果單選增加，清空按鈕
                     var $clearBtn;
                     if(op.selectModel == "single"){
                    	 //$clearBtn = $('<input type="button" class="clear-btn-after-input"/>').appendTo($wraper);
                    	 $clearBtn = $wraper.after('<input type="button" class="clear-btn-after-input"/>').next();
                    	 $clearBtn.click(function(){
                    		 $this.val("");
                    		 $tp.val("");
                    	 });
                     }
                     var $list = $('<div class="multipleDropList-list"></div>').appendTo($wraper);
                     $list.css({ "width": op.width, "height": op.height });
                     //控制彈出頁面的顯示與隐藏
                     $this.click(function (e) {
                         $(".multipleDropList-list").hide();
                         $list.toggle();
                         e.stopPropagation();
                         //加載勾選的選項
                         if(op.selectModel == "multiple"){
                        	 loadSelectedValue($tp.val());
                         }
                     });

                     $(document).click(function () {
                    	 //隐藏之前清空下拉選中的資訊
                    	 if(op.selectModel == "multiple"){
                    		 $("li input", $ul).removeAttr("checked");
                    		 $("li input", $ul).prop("checked",false);
                    	 }
                         $list.hide();
                     });

                     $list.filter("*").click(function (e) {
                         e.stopPropagation();
                     });
                     //加載預設資料
                     $list.append('<ul></ul>');
                     var $ul = $list.find("ul");
                     if(op.selectModel == "multiple"){
                         $ul.append('<li><input type="checkbox" class="multipleDropList-selectAll" value="" /><span>全部</span></li>');
                         op.selectType = "checkbox";
                     }else{
                         op.selectType = "hidden";
                     }


                     //加載json資料,資料是一個數組，[['key','value'],['key','value']]的形式，以後如果是異步的話，需要将json處理成這樣的形式
                     var listArr = op.data;
                     var jsonData;
                     for (var i = 0; i < listArr.length; i++) {
                         jsonData = listArr[i];
                         $ul.append('<li><input type="'+ op.selectType +'" style="float:left" value="' + jsonData[0] + '" /><span>' + jsonData[1] + '</span></li>');
                     }

                     //加載勾選項
                     //loadSelectedValue(op.selected);

                     //全部選擇或全不選
                     $("li:first input", $ul).click(function (e) {
                         if ($(this).attr("checked") == undefined) {
                             $("li input", $ul).attr("checked", "checked");
                             $("li input", $ul).prop("checked",true); //1.6版本之上需要設定，下同
                         }
                         else {
                             $("li input", $ul).removeAttr("checked");
                             $("li input", $ul).prop("checked",false);
                         }
                     });
                     //點選其它複選框時，更新隐藏控件值,文本框的值
                     $("input", $ul).click(function () {
                         setMultipleValues();
                     });

                     $("li", $ul).click(function(){
                         var currentInput = $(this).children().first();
                         if(op.selectModel == "multiple"){
                             if(currentInput.attr("checked") == undefined){
                                 currentInput.attr("checked","checked");
                                 currentInput.prop("checked",true);
                             }else{
                                 currentInput.removeAttr("checked");
                                 currentInput.prop("checked",false);
                             }

                             setMultipleValues();
                         }
                         else{
                             var name = $(this).children().first().next().html();
                             $tp.val(currentInput.val());
                             $this.val(name);
                             //設定完值後處罰afterSelectedHandler事件
                             if ($.isFunction(op.afterSelectedHandler)) {
                                 try{
                                	 op.afterSelectedHandler.apply(this);
                                 } catch(e) {
                                     return;
                                 }
                             }
                             $list.hide();
                         }
      
                     });

                     //設定隐藏input中的值
                     var setMultipleValues = function(){
                         var kArr = new Array();
                         var vArr = new Array();
                         var allSelectArr = $("input[class!='multipleDropList-selectAll']", $ul).not("input:checked").length;
                         if(allSelectArr > 0){
                             $("input[class='multipleDropList-selectAll']", $ul).removeAttr("checked");
                             $("input[class='multipleDropList-selectAll']", $ul).prop("checked",false);
                         }else{
                             $("input[class='multipleDropList-selectAll']", $ul).attr("checked","checked");
                             $("input[class='multipleDropList-selectAll']", $ul).prop("checked",true);
                         }

                         $("input[class!='multipleDropList-selectAll']:checked", $ul).each(function (index) {
                             kArr[index] = $(this).val();
                             vArr[index] = $(this).next().text();
                         });
                         $tp.val(kArr.join(","));
                         $this.val(vArr.join(","));
                         
                         //設定完值後處罰afterSelectedHandler事件
                         if ($.isFunction(op.afterSelectedHandler)) {
                             try{
                            	 op.afterSelectedHandler.apply(this);
                             } catch(e) {
                                 return;
                             }
                         }
                     }
                     
                     var loadSelectedValue = function(value){
                    	 var seledArr = value.split(",");

                    	 $.each(seledArr, function (index) {
                             var value = seledArr[index];
                             if(""!=value && undefined != value){
                                 $("li input[value='" + seledArr[index] + "']", $ul).attr("checked", "checked").prop("checked",true);
                             }
                             if(seledArr.length == op.data.length){
                            	 $("input[class='multipleDropList-selectAll']", $ul).attr("checked","checked");
                                 $("input[class='multipleDropList-selectAll']", $ul).prop("checked",true);
                             }
                         });
                     }
                 });
             }
         });
    })(jQuery);