多选下拉框带搜索(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 ...
随机推荐
- 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 ...
- matlab中xlsread函数的bug
在使用[num txt data]=xlsread('filename')时.num存所有数值型数据,非数值型用NaN表示,txt存非数值型数据,数值型数据的位置为空. 如果filename中的第一行 ...
- go环境变量配置 (GOROOT和GOPATH)
GOROOT就是go的安装路径在~/.bash_profile中添加下面语句: GOROOT=/usr/local/go export GOROOT 当然, 要执行go命令和go工具, 就要配置go的 ...
- 如何在 ASP.NET 中(服务器端)主动清除(HTTP内容响应时)浏览器中的 Cookies 数据
这个 Cookies 设计的好坑...就不写进坑的过程了,直接贴最终解决代码: //清除 cookies 记录 foreach (var key in Request.Cookies.AllKeys) ...
- C图形库 Mingw g++ ege Windows下
今天闲来无事就想搞搞图形界面,本来是想弄openGL的但是配置有点麻烦,就觉得先弄个简单的图形库ege了. 1.下载头文件 地址:http://misaka.googlecode.com/files/ ...
- HTML5学习笔记(十三):JavaScript函数
函数定义 在JavaScript中,定义函数的方式如下: function abs(x) { if (x >= 0) { return x; } else { return -x; } } 上述 ...
- mongodb更新数组中的所有匹配项
假如集合中有如下数据 { "_id" : ObjectId("4b97e62bf1d8c7152c9ccb74"), "title" : & ...
- [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 ...
- (转)用stunnel给普通http通信加密
转自:https://www.digitalocean.com/community/tutorials/how-to-set-up-an-ssl-tunnel-using-stunnel-on-ubu ...
- spark快速上手
spark快速上手 前言 基于Spark 2.1版本 仅仅是快速上手,没有深究细节 主要参考是官方文档 代码均为官方文档中代码,语言为Scala 进入spark-shell 终端输入spark-she ...