多选下拉框带搜索(aps.net)
自己写了一个带搜索功能的多选下拉框,为了要获取值,就没有封装插件,实现思路
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)的更多相关文章
- yii2下拉框带搜索功能
简单的小功能,但是用起来还是蛮爽的.分享出来让更多的人有更快的开发效率,开开心心快乐编程.作者:白狼 出处:http://www.manks.top/yii2_dropdown_search.html ...
- js:jquery multiSelect 多选下拉框实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 自定义SWT控件二之自定义多选下拉框
2.自定义下拉多选框 package com.view.control.select; import java.util.ArrayList; import java.util.HashMap; im ...
- pentaho cde 自定义复选下拉框 checkbox select
pentaho 自带的component 虽多,但是当用户需要在一个表格中查看多个组别的数据时,pentaho自带的单选框就不能实现了,所以复选下拉框势在必行,实现效果如下: 实现原理是借用了jqu ...
- EazyUI_Datagrid_行内编辑(editor)的combobox下拉框带图片
1.业务需求: 商品的明细列表里面下拉框需要 [图片+文字 ] 显示 2.我们使用的是EazyUI,而我比较懒,不习惯用拼接html来显示列表页面,使用的是eazyui的数据网格(datagrid) ...
- Easyui-Combobox多选下拉框
因为工作需要,引入combobox多选下拉框,并且获取选择的值并以","分开. 效果如下: 代码如下: <html> <head> <title> ...
- Extjs4.2 多选下拉框
//多选下拉框 Ext.define('MDM.view.custom.MultiComboBox', { extend: 'Ext.form.ComboBox', alias: 'widget.mu ...
- DropDownList单选与多选下拉框
一.单选DropDownList传值 1.添加界面的DropDownList显示值问题 (1)在方法内添加ViewData的方法: var ad = new UnitsRepository(); Vi ...
- Bootstrap3级联多选下拉框
<!DOCTYPE html> <html> <head> <title>Bootstrap3级联多选下拉框</title> <met ...
随机推荐
- IDEA(2018.01)安装和破解
IDEA(2018.01)安装和破解 1.下载IDE https://www.jetbrains.com/idea/download/#section=windows 选择Ultimate版本 2.下 ...
- ReferenceError: weakly-referenced object no longer exists Python kafka
Python存入kafka报错,ReferenceError: weakly-referenced object no longer exists. Exception in thread 14: p ...
- Linq to sql 消除列重复 去重复
按user分组,取每组的第一个: var o = from r in xe.Descendants("customer") group r b ...
- [hihoCoder] 第五十周: 欧拉路·二
题目1 : 欧拉路·二 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 在上一回中小Hi和小Ho控制着主角收集了分散在各个木桥上的道具,这些道具其实是一块一块骨牌. 主角 ...
- tomcat启动时出现了Failed to start component [StandardEngine[Catalina].StandardHost[localhost]]等错误
tomcat 启动时报错:Failed to start component [StandardEngine[Catalina].StandardHost[localhost]]等错误 解决办法: 是 ...
- 黑马程序猿————Java基础日常笔记---反射与正則表達式
------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- 黑马程序猿----Java基础日常笔记---反射与正則表達式 1.1反射 反射的理解和作用: 首 ...
- 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 -- ...
- 菜鸟调错(三)——Jboss与jdk版本不兼容导致WebService调用出错
环境: jdk1.6 Jboss 5.1.0.GA 问题描述: EJB发布webserivce已经成功,并且能够成功访问wsdl文件: 使用axis1自带的sample/client下的类Dynami ...
- FFmpeg(1)-创建支持FFmpeg的AS项目
一.新建Android Studio项目 注意点: 1.在“Create Android Project”栏目时,须勾选“Include C++ support” 复选框: 2.在“Customize ...
- android笔记--加载框
package com.fuda.ui; import android.app.Activity; import android.os.Bundle; import android.os.Handle ...