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 ...
随机推荐
- 串口计时工具Grabserial简介及修改(添加输入功能)
Grabserial是Tim Bird用python写的一个抓取串口的工具,这个工具能够为收到的每一行信息添加上时间戳. 如果想对启动时间进行优化的话,使用这个工具就可以简单地从串口输出分析出耗时. ...
- jq随手写图片放大
html: <img id="img1" src="<?php echo $info->business_licence_img; ?>" ...
- iphone 下滚动条卡顿解决办法
-webkit-overflow-scrolling:touch; -webkit-text-size-adjust:none;
- 如何知道SQL Server机器上有多少个NUMA节点
如何知道SQL Server机器上有多少个NUMA节点 文章出处: How can you tell how many NUMA nodes your SQL Server has? http://i ...
- [.net 面向对象程序设计进阶] (17) 多线程(Multithreading)(二) 利用多线程提高程序性能（中）
[.net 面向对象程序设计进阶] (17) 多线程(Multithreading)(二) 利用多线程提高程序性能(中) 本节要点: 上节介绍了多线程的基本使用方法和基本应用示例,本节深入介绍.NET ...
- MySQL 常用的UPDATE操作
标签:UPDATE 概述 测试环境:mysql 5.6.21 步骤 创建测试表 CREATE TABLE `product` ( `proID` ) NOT NULL AUTO_INCREMENT C ...
- Struts2.X——搭建
今天是我第一次用博客,虽然还有好多的不懂,但是我还是会努力的把自己学到的写下来,分享给大家: 一,SSH框架中的struts2的搭建流程 1.在搭建struts2之前,我们首先要有struts2的ja ...
- Android开发学习之路-Volley源码解析
从简单的StringRequest入手看看Volley的工作机制. 先简单说下Volley的用法: ① 获取一个RequestQueue mRequestQueue = Volley.newReque ...
- 初学者--bootstrap（五）JavaScript插件（上）----在路上（6）
jQuery 插件为 Bootstrap 的组件赋予了“生命”.可以简单地一次性引入所有插件,或者逐个引入到你的页面中. 一:首先要确认的是,单个还是全部引入: JavaScript 插件可以单个引入 ...
- NotSupportedException-无法将类型“System.DateTime”强制转换为类型“System.Object”
几张图就可以说明一切 2015-03-29 21:54:09,206 [77] ERROR log - System.NotSupportedException: 无法将类型“System.DateT ...