JS实现带复选框的下拉菜单
2016-01-08 00:04
751 查看
这段时间在做后台的时候需要一个可以复选的下拉菜单,用到的是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文件下的
baseic.html
看一下效果图:
-----------------------------------------------------------------------------------------------------------------------------------------------------------
附:下面这是方便提交表单向提交页提交的是各项的ID,而不是文本,需要的看一下:
ok,完成,如果有问题或者优化建议联系QQ:2384834530
--------------------------------------------------------------------------------------------------------------------------------------------------------------
下面就来具体的实现:首先说一下需要的文件(直接上图):
其中最下面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:0; } h2 { font-size:18px; font-weight:bold; margin:0; 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运动相关知识点小结(附弹性运动示例)
- JavaScript缓冲运动实现方法(2则示例)
- js如何改变文章的字体大小
- javascript匀速运动实现方法分析
- javascript多物体运动实现方法分析
- javascript运动框架用法实例分析(实现放大与缩小效果)
- javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
- javascript弹性运动效果简单实现方法
- js实现对ajax请求面向对象的封装
- 学习JavaScript设计模式之状态模式
- javascript正则表达式定义(语法)总结
- JavaScript拖拽、碰撞、重力及弹性运动实例分析
- jsPlugin 解决Table中值相同的列进行rowlSpan合并
- JavaScript 开发进阶:理解 JavaScript 作用域和作用域链
- 学习Javascript闭包(Closure)
- js基础学习笔记1
- 关于javascript的回调函数与异步函数的关系理解
- JavaScript字典
- 《JavaScript高级程序设计》第14、17、20章
- 2016值得关注的语言平台、JS框架