摘要: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("<p><p></p></p>").parent().parent().addClass(op.wraperClass); var $list = $('<p class="list"></p>').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" class="selectAll" 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>

脚本宝典收集整理的这篇文章主要介绍了

js实例教程-基于jquery的可多选的下拉列表框

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

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("<p><p></p></p>").parent().parent().addClass(op.wraperClass);
var $list = $('<p class="list"></p>').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" class="selectAll" 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:"淮安"}' />
<p class="testContainer">
<br />
<br />
<br />
<br />
<p 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" />
</p>
</p>

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("<p><p></p></p>").parent().parent().addClass(op.wraperClass);
var $list = $('<p class="list"></p>').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" class="selectAll" 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:"淮安"}' />
<p class="testContainer">
<br />
<br />
<br />
<br />
<p 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" />
</p>
</p>

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

js实例教程-基于jquery的可多选的下拉列表框

全部内容,希望文章能够帮你解决

js实例教程-基于jquery的可多选的下拉列表框

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过