多选下拉框带搜索（aps.net）

Posted 2020-06-17

自己写了一个带搜索功能的多选下拉框，为了要获取值，就没有封装插件，实现思路

 

1.一个文本框 做搜索

2.一个文本框显示选中文本，一个隐藏控件存值

3.一个div里面绑定CheckBoxList控件（这里，你也可以请求后直接插入checkbox）

代码

1.一个变量把div的html存起来

2.选中就加到文本框，取消就减掉

//选中记录，反选删除
$("#divChkList :checkbox").each(function () {
$(this).click(function () {
var $txtList = $("#txtList");
if (this.checked) {
$txtList.val($txtList.val() + $(this).next().text() + ",");
$("#hid_id").val($("#hid_id").val() + $(this).val() + ",");
}
else {
$txtList.val($txtList[0].value.replace($(this).next().text() + ‘,‘, ‘‘));
$("#hid_id").val($("#hid_id").val().replace($(this).val() + ‘,‘, ‘‘));
}
});
});

3.搜索

//判断是否包含，包含则选中
if ($("#txtList").val().indexOf($(this).next().text()) > -1) {
$(this).attr("checked", true);
}
else {
$(this).attr("checked", false);
}

 

//全选反选

//全选/反选
function allcb() {
if ($("#all").attr("checked") == "checked") {
$("#divChkList :checkbox").each(function () {
$(this).attr("checked", true);
var $txtList = $("#txtList");
if ($txtList.val().indexOf($(this).next().text()) == -1) {
$txtList.val($txtList.val() + $(this).next().text() + ",");
$("#hid_id").val($("#hid_id").val() + $(this).val() + ",");
}
});
}
else {
$("#divChkList :checkbox").each(function () {
$(this).attr("checked", false);
});
$("#txtList").val("");
$("#hid_id").val("");
}
}

具体代码：

http://download.csdn.net/detail/jine515073/9445968