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

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

多选下拉框带搜索(aps.net)的更多相关文章

  1. yii2下拉框带搜索功能

    简单的小功能,但是用起来还是蛮爽的.分享出来让更多的人有更快的开发效率,开开心心快乐编程.作者:白狼 出处:http://www.manks.top/yii2_dropdown_search.html ...

  2. js:jquery multiSelect 多选下拉框实例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 自定义SWT控件二之自定义多选下拉框

    2.自定义下拉多选框 package com.view.control.select; import java.util.ArrayList; import java.util.HashMap; im ...

  4. pentaho cde 自定义复选下拉框 checkbox select

    pentaho  自带的component 虽多,但是当用户需要在一个表格中查看多个组别的数据时,pentaho自带的单选框就不能实现了,所以复选下拉框势在必行,实现效果如下: 实现原理是借用了jqu ...

  5. EazyUI_Datagrid_行内编辑(editor)的combobox下拉框带图片

    1.业务需求: 商品的明细列表里面下拉框需要 [图片+文字 ] 显示 2.我们使用的是EazyUI,而我比较懒,不习惯用拼接html来显示列表页面,使用的是eazyui的数据网格(datagrid) ...

  6. Easyui-Combobox多选下拉框

    因为工作需要,引入combobox多选下拉框,并且获取选择的值并以","分开. 效果如下: 代码如下: <html> <head> <title> ...

  7. Extjs4.2 多选下拉框

    //多选下拉框 Ext.define('MDM.view.custom.MultiComboBox', { extend: 'Ext.form.ComboBox', alias: 'widget.mu ...

  8. DropDownList单选与多选下拉框

    一.单选DropDownList传值 1.添加界面的DropDownList显示值问题 (1)在方法内添加ViewData的方法: var ad = new UnitsRepository(); Vi ...

  9. Bootstrap3级联多选下拉框

    <!DOCTYPE html> <html> <head> <title>Bootstrap3级联多选下拉框</title> <met ...

随机推荐

  1. Java – How to add days to current date

    1. Calendar.add Example to add 1 year, 1 month, 1 day, 1 hour, 1 minute and 1 second to the current ...

  2. matlab中xlsread函数的bug

    在使用[num txt data]=xlsread('filename')时.num存所有数值型数据,非数值型用NaN表示,txt存非数值型数据,数值型数据的位置为空. 如果filename中的第一行 ...

  3. go环境变量配置 (GOROOT和GOPATH)

    GOROOT就是go的安装路径在~/.bash_profile中添加下面语句: GOROOT=/usr/local/go export GOROOT 当然, 要执行go命令和go工具, 就要配置go的 ...

  4. 如何在 ASP.NET 中(服务器端)主动清除(HTTP内容响应时)浏览器中的 Cookies 数据

    这个 Cookies 设计的好坑...就不写进坑的过程了,直接贴最终解决代码: //清除 cookies 记录 foreach (var key in Request.Cookies.AllKeys) ...

  5. C图形库 Mingw g++ ege Windows下

    今天闲来无事就想搞搞图形界面,本来是想弄openGL的但是配置有点麻烦,就觉得先弄个简单的图形库ege了. 1.下载头文件 地址:http://misaka.googlecode.com/files/ ...

  6. HTML5学习笔记(十三):JavaScript函数

    函数定义 在JavaScript中,定义函数的方式如下: function abs(x) { if (x >= 0) { return x; } else { return -x; } } 上述 ...

  7. mongodb更新数组中的所有匹配项

    假如集合中有如下数据 { "_id" : ObjectId("4b97e62bf1d8c7152c9ccb74"), "title" : & ...

  8. [Windows Azure] Load Testing in Windows Azure

    The primary goal of a load test is to simulate many users accessing a web application at the same ti ...

  9. (转)用stunnel给普通http通信加密

    转自:https://www.digitalocean.com/community/tutorials/how-to-set-up-an-ssl-tunnel-using-stunnel-on-ubu ...

  10. spark快速上手

    spark快速上手 前言 基于Spark 2.1版本 仅仅是快速上手,没有深究细节 主要参考是官方文档 代码均为官方文档中代码,语言为Scala 进入spark-shell 终端输入spark-she ...