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

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. IDEA(2018.01)安装和破解

    IDEA(2018.01)安装和破解 1.下载IDE https://www.jetbrains.com/idea/download/#section=windows 选择Ultimate版本 2.下 ...

  2. ReferenceError: weakly-referenced object no longer exists Python kafka

    Python存入kafka报错,ReferenceError: weakly-referenced object no longer exists. Exception in thread 14: p ...

  3. Linq to sql 消除列重复 去重复

    按user分组,取每组的第一个: var o = from r in xe.Descendants("customer")                    group r b ...

  4. [hihoCoder] 第五十周: 欧拉路·二

    题目1 : 欧拉路·二 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 在上一回中小Hi和小Ho控制着主角收集了分散在各个木桥上的道具,这些道具其实是一块一块骨牌. 主角 ...

  5. tomcat启动时出现了Failed to start component [StandardEngine[Catalina].StandardHost[localhost]]等错误

    tomcat 启动时报错:Failed to start component [StandardEngine[Catalina].StandardHost[localhost]]等错误 解决办法: 是 ...

  6. 黑马程序猿————Java基础日常笔记---反射与正則表達式

    ------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- 黑马程序猿----Java基础日常笔记---反射与正則表達式 1.1反射 反射的理解和作用: 首 ...

  7. tengine 增加ngx_http_cache_purge_module 模块

    wget http://labs.frickle.com/files/ngx_cache_purge-2.1.tar.gz tar zxvf ngx_cache_purge-2.1.tar.gz -- ...

  8. 菜鸟调错(三)——Jboss与jdk版本不兼容导致WebService调用出错

    环境: jdk1.6 Jboss 5.1.0.GA 问题描述: EJB发布webserivce已经成功,并且能够成功访问wsdl文件: 使用axis1自带的sample/client下的类Dynami ...

  9. FFmpeg(1)-创建支持FFmpeg的AS项目

    一.新建Android Studio项目 注意点: 1.在“Create Android Project”栏目时,须勾选“Include C++ support” 复选框: 2.在“Customize ...

  10. android笔记--加载框

    package com.fuda.ui; import android.app.Activity; import android.os.Bundle; import android.os.Handle ...