html隐藏下拉多选框的,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("

//如果单选增加，清空按钮

var $clearBtn;

if(op.selectModel == "single"){

//$clearBtn = $('').appendTo($wraper);

$clearBtn = $wraper.after('').next();

$clearBtn.click(function(){

$this.val("");

$tp.val("");

});

}

var $list = $('

$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('

var $ul = $list.find("ul");

if(op.selectModel == "multiple"){

$ul.append('

全部');

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('

' + jsonData[1] + '');

}

//加载勾选项

//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);