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 ...
随机推荐
- 微信支付：JSAPI支付一直提示URL未注册
今天意外碰上了这个问题,想想微信的坑真多…… 解决办法: 首先要看微信公众号里的 支付授权目录 是否已正确填写,还要验证 url大小写 必须相同 其次查看一下自己请求的地址是否与上面填写的是否一样!u ...
- iphone使用mac上的SOCKS代理
Step 1. Make sure the SOCKS tunnel on your work computer allows LAN connections so your iPhone/iPod ...
- 轻量级通信引擎StriveEngine —— C/S通信demo(2) —— 使用二进制协议 （附源码）
在网络上,交互的双方基于TCP或UDP进行通信,通信协议的格式通常分为两类:文本消息.二进制消息. 文本协议相对简单,通常使用一个特殊的标记符作为一个消息的结束. 二进制协议,通常是由消息头(Head ...
- [翻译]理解Swift中的Optional
原文出处:Understanding Optionals in Swift 苹果新的Swift编程语言带来了一些新的技巧,能使软件开发比以往更方便.更安全.然而,一个很有力的特性Optional,在你 ...
- 打造程序员的高效生产力工具-mac篇
打造程序员的高效生产力工具-mac篇 1 概述 古语有云:“工欲善其事,必先利其器” [1] ,作为一个程序员,他最重要的生产资源是脑力知识,最重要的生产工具是什么?电脑. 在进行重要的脑力成果输 ...
- UWP开发之控件：用WebView做聊天框
目录 说明 WebView存在的价值 使用WebView的几个重要技巧 使用WebView做的聊天框 说明 大家都知道,无论是之前的Winform.WPF还是现在的IOS.Android开发中,都存在 ...
- MySQL 启动服务报错解决方案
标签:ERROR! The server quit without updating PID file (/var/lib/mysql/localhost.localdomain.pid) 概述 文章 ...
- Generate input file for OVITO
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...
- Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放
UEditor组件是百度提供的一套开源的web在线所见即所得富文本编辑器,具有轻量,可定制,注重用户体验等特点,基于MIT协议,功能很强大.最近在使用的过程中发现其中上传的图片(或者插入已有的表情包图 ...
- JS.中文乱码，Jsp\Servlet端的解决办法
JS.中文乱码,Jsp\Servlet端的解决办法 2010-03-08 15:18:21| 分类: Extjs | 标签:encodeuricomponent 乱码 urldecoder ...