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 ...
随机推荐
- 一鼓作气 博客--第八篇 note8
0.,222] list[33] except IndexError as e : print('index error ') except ValueError as e : print('valu ...
- Windows安装和使用zookeeper
之前整理过一篇文章<zookeeper 分布式锁服务>,本文介绍的 Zookeeper 是以 3.4.5 这个稳定版本为基础,最新的版本可以通过官网 http://hadoop.apach ...
- MySQL 常用的UPDATE操作
标签:UPDATE 概述 测试环境:mysql 5.6.21 步骤 创建测试表 CREATE TABLE `product` ( `proID` ) NOT NULL AUTO_INCREMENT C ...
- Oracle客户端连接远程Oracle服务中文乱码问题
在本机远程连接远程Oracle服务的时候,写了如下检索语句 select * from sys_employee 结果集中出现了中文乱码,但是远程服务器本身的PL/SQL检索出来没有问题 解决方案: ...
- Senparc.Weixin.MP SDK 微信公众平台开发教程（十八）：Web代理功能
在Senparc.Weixin.dll v4.5.7版本开始,我们提供了Web代理功能,以方便在受限制的局域网内的应用可以顺利调用接口. 有关的修改都在Senparc.Weixin/Utilities ...
- 浅谈JavaScript的New关键字
原型和闭包算是JavaScript中最常见,最难以理解,最容易被当做问题的两个部分,当然还有它们的延伸,如作用域链,继承等等吧,我最近也是各种看,各种翻,记录点自己的心得,写写总会让自己的理解更深一些 ...
- weblogic配置数据源
启动weblogic 管理服务器,使用管理用户登录weblogic管理控制台 打开管理控制台后,在左侧的树形域结构中,选择服务->数据源. 在右侧的窗口中,选择 新建->一般数据源 ...
- easyui 数据库修改部分（基于数据添加逻辑功能修改）
{iconCls:'icon-edit',text:'修改', handler:function(){ type="edit"; //判断是否选中一条数据 var data = $ ...
- SQL Server 默认跟踪（Default Trace）
一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 基础知识(Rudimentary Knowledge) 查看默认跟踪信息(Default Tr ...
- OpenCASCADE Conic to BSpline Curves-Parabola
OpenCASCADE Conic to BSpline Curves-Parabola eryar@163.com Abstract. Rational Bezier Curve can repre ...