JS实现带复选框的下拉菜单
这段时间在做后台的时候需要一个可以复选的下拉菜单，用到的是easyUI中的combo的Demo,先看看官方easyUI：http://www.jeasyui.com/documentation/index.php#
--------------------------------------------------------------------------------------------------------------------------------------------------------------
下面就来具体的实现：首先说一下需要的文件（直接上图）：
其中最下面easyui.css和两个JS文件就在easyUI的官网(http://www.jeasyui.com/download/index.php)上下载,
官方文档的截图：
其他的代码附：
注意：
demo.css文件在下载的文件中有好几个，用的是themes下的default文件下的
*{
font-size:12px;
}
body {
font-family:verdana,helvetica,arial,sans-serif;
padding:20px;
font-size:12px;
margin:;
}
h2 {
font-size:18px;
font-weight:bold;
margin:;
margin-bottom:15px;
}
.demo-info{
padding:0 0 12px 0;
}
.demo-tip{
display:none;
}
baseic.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Combo - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="easyui.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>
<select id="cc" style="width:150px"></select>
<div id="sp">
<div style="color:#99BBE8;background:#fafafa;padding:5px;">请选择渠道</div>
<div style="padding:5px">
<input type="checkbox" name="lang" value="01"><span>天天挖坑</span><br />
<input type="checkbox" name="lang" value="02"><span>爱游戏</span><br />
<input type="checkbox" name="lang" value="03"><span>沃商店</span><br />
<input type="checkbox" name="lang" value="04"><span>咪咕</span> </div>
</div>
<script type="text/javascript">
$(function () {
var s = ",";//设定分隔付
$('#cc').combo({
required: true,//是否验证
editable: true,//是否可编辑
multiple: true//可否支持多选
});
$('#sp').appendTo($('#cc').combo('panel'));
$('#sp input').click(function () {
var v = $(this).next('span').text();
if ("," == s||""==s) {//第一次勾选时起作用
s = $(this).next('span').text();
}
else if (-1 < s.indexOf(v)) {//当去掉勾选时起作用 Indexof:返回某个指定的字符串值在字符串中首次出现的位置
var n = s.indexOf(v);
var m = s.indexOf(v) + v.length;
if (0 == s.indexOf(v)) {//取消第一个点击的勾选
s = s.substring(n + v.length + 1, s.length);
} else if (0 < s.indexOf(v) && ((s.indexOf(v) + v.length) < s.length)) {//取消非第一个和最后一个的勾选
s = s.substring(0, n) + s.substring(n + v.length + 1, s.length);
} else {//取消最后一个的勾选
s = s.substring(0, n - 1);
}
}
else {
s = s + "," + $(this).next('span').text();//将勾选各值拼接 }
$('#cc').combo('setValue', s).combo('setText', s).combo('showPanel');//将值赋值给文本框并在文本里显示出来
});
});
</script>
</body>
</html>
看一下效果图：
-----------------------------------------------------------------------------------------------------------------------------------------------------------
附：下面这是方便提交表单向提交页提交的是各项的ID，而不是文本，需要的看一下：
<td>
<select id="cc" style="width:150px"></select>
<div id="sp">
<div style="color:#99BBE8;background:#fafafa;padding:5px;">请选择渠道</div>
<div style="padding:5px">
@{
foreach (var item in ViewData["channelList"] as List<Channel>)
{
int channel = item.ChannelID+1;
<input type="checkbox" name="lang" value="@item.ChannelID"><span >@item.ChannelName</span><br />
}
}
</div>
</div> <script type="text/javascript">
$(function () {
var s = ",";//设定分隔付
var channelID = ",";
$('#cc').combo({
required: true,//是否验证
editable: true,//是否可编辑
multiple: true//可否支持多选
});
$('#sp').appendTo($('#cc').combo('panel'));
$('#sp input').click(function () {
var v = $(this).next('span').text();
var IDstr = $(this).val();
if ("," == s || "" == s) {//第一次勾选时起作用
s = $(this).next('span').text();
channelID = $(this).val();
}
else if (-1 < s.indexOf(v)) {//当去掉勾选时起作用 Indexof:返回某个指定的字符串值在字符串中首次出现的位置
var n = s.indexOf(v);
var m = s.indexOf(v) + v.length;
var p = channelID.indexOf(IDstr);
if (0 == s.indexOf(v)) {//取消第一个点击的勾选
s = s.substring(n + v.length + 1, s.length);
channelID = channelID.substring(n + IDstr.length + 1, channelID.length);
} else if (0 < s.indexOf(v) && ((s.indexOf(v) + v.length) < s.length)) {//取消非第一个和最后一个的勾选
s = s.substring(0, n) + s.substring(n + v.length + 1, s.length);
channelID = channelID.substring(0, p) + channelID.substring(p + IDstr.length + 1, channelID.length); } else {//取消最后一个的勾选
s = s.substring(0, n - 1);
channelID = channelID.substring(0, p - 1);
}
}
else {
s = s + "," + $(this).next('span').text();//将勾选各渠道名称拼接
channelID = channelID + "," + $(this).val();//将勾选各渠道ID拼接
} $('#cc').combo('setValue', s).combo('setText', s).combo('showPanel');//将值赋值给文本框并在文本里显示出来
document.getElementById("hidden_channel").value = channelID;
});
});
</script>
<input id="hidden_channel" type="hidden" name="channel" />
</td>
ok，完成，如果有问题或者优化建议联系QQ：2384834530
JS实现带复选框的下拉菜单的更多相关文章
- DOM（十）使用DOM设置单选按钮、复选框、下拉菜单
1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为t ...
- JQuery对单选框，复选框，下拉菜单的操作
JSP <%@ page language="java" import="java.util.*" pageEncoding="utf-8&qu ...
- layui 单选框、复选框、下拉菜单 不显示问题 记录
1. 如果是 ajax嵌套了 页面, 请确保 只有最外层的页面引入了 layui.css 和 layui.js 内层页面 切记不要再次引入 2. layui.use(['form', 'upload ...
- jq获取单选框、复选框、下拉菜单的值
1.<input type="radio" name="testradio" value="jquery获取radio的值" /> ...
- Easyui-combobox-checkbox-带复选框的下拉框
$.post("getSubInsuranceTypeList.do",{parent_id:node.id},function(result){ ...
- vue.js实现单选框、复选框和下拉框
Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框 在传统的HTM ...
- [ PyQt入门教程 ] PyQt5基本控件使用:单选按钮、复选框、下拉框
本文主要介绍PyQt5界面最基本使用的单选按钮.复选框.下拉框三种控件的使用方法进行介绍. 1.RadioButton单选按钮/CheckBox复选框.需要知道如何判断单选按钮是否被选中. 2.Com ...
- html基本标签表单实现交互原理，单选框，复选框，下拉框介绍
表单是什么?表单是前端和服务器做交互的一种机制,表单收集用户输入信息,之后发送或者提交给服务器.用户在输入的信息称之为内容,内容的文本分为普通和密码型,用户通过单选框.复选框.下拉框(也就是下拉菜单) ...
- Selenium3自动化测试【28】单选框、复选框、下拉选择框
Html页面中的单选按钮.复选框.下拉框均可通过WebDriver实现操做.本节结合案例一起来看看WebDriver如何操做这些控件. 同步视频知识与系列知识内容,可关注:[公众号]:柒哥测试:[WX ...
随机推荐
- Java_equals和“==”的区别
1. 对于基本数据类型 它们的比较,应该用“==”,比较的是他们的值. 2. 引用数据类型 “==”判断的是对象是否为同一个,也就是它们内存中的存放地址是否一样,一样,则返回true,否则返回fals ...
- syntax error near unexpected token‘(
用虚拟机的时候出现这样的: 上网查了资料之后,在括号"( " 前加上"$"字符就暂时不会提示出错了.
- 使用CSS3制作三角形小图标
话不多说,直接写代码,希望能够对大家有所帮助! 1.html代码如下: <a href="#" class="usetohover"> <di ...
- sass学习总结
SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护.个人简单总结了下比较常用的的一些东西. $ 开头定义变量名 是个全局变量 在{ $ ...
- 禁用SQL Server Management Studio的IntelliSense
禁用SQL Server Management Studio的IntelliSense 本文版权归作者所有,未经作者同意不得转载.
- 一个哥们看到数据库日志不断增大 [log_reuse_wait_desc]为replication 之后的做法
一哥们看到数据库日志不断增大 [log_reuse_wait_desc]为replication 之后的做法 一天那个哥们看到数据库日志暴涨,用sys.databases 视图看一下[log_reus ...
- LB 负载均衡的层次结构
作为后端应用的开发者,我们经常开发.调试.测试完我们的应用并发布到生产环境,用户就可以直接访问到我们的应用了.但对于互联网应用,在你的应用和用户之间还隔着一层低调的或厚或薄的负载均衡层软件,它们不显山 ...
- win7 64位下 mongodb安装及命令运行
有网友老催我把框架加上mongodb的支持,于是偶尔抽空看了看相关的文章. 今天有缘,就把mongodb安装了一下,中间遇到了小小的问题,So,把整个过程记录一下: 1:先上官网:http://www ...
- TaintDroid深入剖析之启动篇
1 背景知识 1.1 Android平台软件动态分析现状 众所周知,在计算机领域中所有的软件分析方法都可以归为静态分析和动态分析两大类,在Android平台也不例外.而随着软件加固.混淆技术的不 ...
- [译]Kinect for Windows SDK开发入门(十八)：Kinect Interaction交互控件
本文译自 http://dotneteers.net/blogs/vbandi/archive/2013/03/25/kinect-interactions-with-wpf-part-i-getti ...