基于jquery的可多选的下拉列表框
基于jquery的可多选的下拉列表框
发布时间:2016-12-30 来源:查字典编辑
摘要:同事在网上的找的下拉列表框出现位置不对的和加载慢的BUG,反正多选下拉列表框实现也很简单,与其看那些结构混乱的代码,不如自己重新实现一个。先...

同事在网上的找的下拉列表框出现位置不对的和加载慢的BUG,反正多选下拉列表框实现也很简单,与其看那些结构混乱的代码,不如自己重新实现一个。

先看效果: http://demo.jb51.net/js/2012/jquery_demo/jquery_select.html

JS:

复制代码 代码如下:

(function ($) {

$.fn.extend({

MultDropList: function (options) {

var op = $.extend({ wraperClass: "wraper", width: "150px", height: "200px", data: "", selected: "" }, options);

return this.each(function () {

var $this = $(this); //指向TextBox

var $hf = $(this).next(); //指向隐藏控件存

var conSelector = "#" + $this.attr("id") + ",#" + $hf.attr("id");

var $wraper = $(conSelector).wrapAll("<div><div></div></div>").parent().parent().addClass(op.wraperClass);

var $list = $('<div></div>').appendTo($wraper);

$list.css({ "width": op.width, "height": op.height });

//控制弹出页面的显示与隐藏

$this.click(function (e) {

$list.toggle();

e.stopPropagation();

});

$(document).click(function () {

$list.hide();

});

$list.filter("*").click(function (e) {

e.stopPropagation();

});

//加载默认数据

$list.append('<ul><li><input type="checkbox" value="" /><span>全部</span></li></ul>');

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

//加载json数据

var listArr = op.data.split("|");

var jsonData;

for (var i = 0; i < listArr.length; i++) {

jsonData = eval("(" + listArr[i] + ")");

$ul.append('<li><input type="checkbox" value="' + jsonData.k + '" /><span>' + jsonData.v + '</span></li>');

}

//加载勾选项

var seledArr;

if (op.selected.length > 0) {

seledArr = selected.split(",");

}

else {

seledArr = $hf.val().split(",");

}

$.each(seledArr, function (index) {

$("li input[value='" + seledArr[index] + "']", $ul).attr("checked", "checked");

var vArr = new Array();

$("input[class!='selectAll']:checked", $ul).each(function (index) {

vArr[index] = $(this).next().text();

});

$this.val(vArr.join(","));

});

//全部选择或全不选

$("li:first input", $ul).click(function () {

if ($(this).attr("checked")) {

$("li input", $ul).attr("checked", "checked");

}

else {

$("li input", $ul).removeAttr("checked");

}

});

//点击其它复选框时,更新隐藏控件值,文本框的值

$("input", $ul).click(function () {

var kArr = new Array();

var vArr = new Array();

$("input[class!='selectAll']:checked", $ul).each(function (index) {

kArr[index] = $(this).val();

vArr[index] = $(this).next().text();

});

$hf.val(kArr.join(","));

$this.val(vArr.join(","));

});

});

}

});

})(jQuery);

$(document).ready(function () {

$("#txtTest").MultDropList({ data: $("#hfddlList").val() });

});

</script>

CSS:

复制代码 代码如下:

.wraper

{

position: relative;

}

.list

{

width: 200px;

height: 200px;

overflow: auto;

position: absolute;

border: 1px solid #617775;

display: none;

background: none repeat scroll 0 0 #F0F6E4;

float: left;

}

.list ul li

{

padding-left: 10px;

padding-top: 2px;

padding-bottom: 2px;

border-top: 1px solid black;

}

ul

{

list-style:none outside none;

}

HTML:

复制代码 代码如下:

<asp:HiddenField ID="hfddlList" runat="server" Value='{k:1,v:"南京"}|{k:2,v:"上海"}|{k:3,v:"扬州"}|{k:4,v:"苏州"}|{k:5,v:"无锡"}|{k:6,v:"常州"}|{k:7,v:"盐城"}|{k:8,v:"徐州"}|{k:9,v:"泰州"}|{k:10,v:"淮安"}' />

<div>

<br />

<br />

<br />

<br />

<div>

<asp:TextBox ID="txtTest" runat="server" Width="150px"></asp:TextBox>

<asp:HiddenField ID="hfTest" runat="server" Value="3,5" />

</div>

</div>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类