一佳一

记录像1+1一样简洁的代码

导航

多选下拉框带搜索(aps.net)

Posted on 2016-02-27 15:48  一佳一  阅读(3982)  评论(0编辑  收藏  举报

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

 

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