快捷導(dǎo)航

基于jquery的可多選的下拉列表框

更新時(shí)間：2012年07月20日 19:20:04 作者：

同事在網(wǎng)上的找的下拉列表框出現(xiàn)位置不對(duì)的和加載慢的BUG，反正多選下拉列表框?qū)崿F(xiàn)也很簡(jiǎn)單，與其看那些結(jié)構(gòu)混亂的代碼，不如自己重新實(shí)現(xiàn)一個(gè)

同事在網(wǎng)上的找的下拉列表框出現(xiàn)位置不對(duì)的和加載慢的BUG，反正多選下拉列表框?qū)崿F(xiàn)也很簡(jiǎn)單，與其看那些結(jié)構(gòu)混亂的代碼，不如自己重新實(shí)現(xiàn)一個(gè)。

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

JS:

復(fù)制代碼代碼如下:

 
(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 class="list"></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(); 
}); 
//加載默認(rèn)數(shù)據(jù) 
$list.append('<ul><li><input type="checkbox" class="selectAll" value="" /><span>全部</span></li></ul>'); 
var $ul = $list.find("ul"); 
//加載json數(shù)據(jù) 
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>'); 
} 
//加載勾選項(xiàng) 
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"); 
} 
}); 
//點(diǎn)擊其它復(fù)選框時(shí)，更新隱藏控件值,文本框的值 
$("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:

復(fù)制代碼代碼如下:

 
.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:

復(fù)制代碼代碼如下:

 
<asp:HiddenField ID="hfddlList" runat="server" Value='{k:1,v:"南京"}|{k:2,v:"上海"}|{k:3,v:"揚(yáng)州"}|{k:4,v:"蘇州"}|{k:5,v:"無錫"}|{k:6,v:"常州"}|{k:7,v:"鹽城"}|{k:8,v:"徐州"}|{k:9,v:"泰州"}|{k:10,v:"淮安"}' /> 
<div class="testContainer"> 
<br /> 
<br /> 
<br /> 
<br /> 
<div style="margin-left: 300px; height: 30px;"> 
<asp:TextBox ID="txtTest" runat="server" Width="150px"></asp:TextBox> 
<asp:HiddenField ID="hfTest" runat="server" Value="3,5" /> 
</div> 
</div> 

您可能感興趣的文章: