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

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. Android自己定义ViewGroup(二)——带悬停标题的ExpandableListView

    项目里要加一个点击可收缩展开的列表,要求带悬停标题,详细效果例如以下图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fon ...

  2. CSS中字体响应式的设置

    在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...

  3. sql server获取时间格式

    在本文中,GetDate()获得的日期由两部分组成,分别是今天的日期和当时的时间: Select GetDate()  用DateName()就可以获得相应的年.月.日,然后再把它们连接起来就可以了: ...

  4. Spring开启方法异步执行

    @EnableAsync @Target(ElementType.TYPE) @Retention(RetentionPolicy.RUNTIME) @Documented @Import(Async ...

  5. c# 除掉前三个字符,剩下的4个字符全为数字方为特殊车辆

    string plate="粤BN1223"; if (plate.Contains("粤BN")) { //除掉前三个字符,剩下的4个字符全为数字方为特殊车辆 ...

  6. [Windows Azure] Create and use a reporting service in Windows Azure SQL Reporting

    Create and use a reporting service in Windows Azure SQL Reporting In this tutorial you will learn ab ...

  7. 非nodejs方式的vue.js的使用

    1.node环境 详细见我之前的文章,node的安装 2.git环境 git bash命令窗,支持bash命令,cmd不支持bash命令 3.cnpm安装 cnpm是针对国内使用npm网络慢的而使用的 ...

  8. COMPILING ACTIONSCRIPT 3.0 WITH SUBLIME TEXT 2

    At Clock we typically spend our time developing JavaScript and PHP, however, occasionally Flash pres ...

  9. 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-4 模态弹出框--结构分析

    模态弹出框--结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-con ...

  10. 转webstorm的快捷键

    止 静 java android 转-webstorm快捷键 默认配置-Eclipse的常用快捷键对照表 查找/代替 Webstorm快捷键 Eclipse快捷键 说明 ctrl+shift+N ct ...