当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 基于jquery的可多选的下拉列表框

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

2018年10月17日  | 移动技术网IT编程  | 我要评论

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:

代码如下:


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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网