这段时间在做后台的时候需要一个可以复选的下拉菜单，用到的是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文件下的

  1.  *{
  2.      font-size:12px;
  3.  }
  4.  body {
  5.      font-family:verdana,helvetica,arial,sans-serif;
  6.      padding:20px;
  7.      font-size:12px;
  8.      margin:;
  9.  }
  10.  h2 {
  11.      font-size:18px;
  12.      font-weight:bold;
  13.      margin:;
  14.      margin-bottom:15px;
  15.  }
  16.  .demo-info{
  17.      padding:0 0 12px 0;
  18.  }
  19.  .demo-tip{
  20.      display:none;
  21.  }

baseic.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Basic Combo - jQuery EasyUI Demo</title>
  6.     <link rel="stylesheet" type="text/css" href="easyui.css">
  7.     <link rel="stylesheet" type="text/css" href="demo.css">
  8.     <script type="text/javascript" src="jquery.min.js"></script>
  9.     <script type="text/javascript" src="jquery.easyui.min.js"></script>
  10. </head>
  11. <body>
  12.     <select id="cc" style="width:150px"></select>
  13.     <div id="sp">
  14.         <div style="color:#99BBE8;background:#fafafa;padding:5px;">请选择渠道</div>
  15.         <div style="padding:5px">
  16.             <input type="checkbox" name="lang" value="01"><span>天天挖坑</span><br />
  17.             <input type="checkbox" name="lang" value="02"><span>爱游戏</span><br />
  18.             <input type="checkbox" name="lang" value="03"><span>沃商店</span><br />
  19.             <input type="checkbox" name="lang" value="04"><span>咪咕</span>
  20.  
  21.         </div>
  22.     </div>
  23.     <script type="text/javascript">
  24.         $(function () {
  25.             var s = ",";//设定分隔付
  26.             $('#cc').combo({
  27.                 required: true,//是否验证
  28.                 editable: true,//是否可编辑
  29.                 multiple: true//可否支持多选
  30.             });
  31.             $('#sp').appendTo($('#cc').combo('panel'));
  32.             $('#sp input').click(function () {
  33.                 var v = $(this).next('span').text();
  34.                 if ("," == s||""==s) {//第一次勾选时起作用
  35.                     s = $(this).next('span').text();
  36.                 }
  37.                 else if (-1 < s.indexOf(v)) {//当去掉勾选时起作用  Indexof:返回某个指定的字符串值在字符串中首次出现的位置
  38.                     var n = s.indexOf(v);
  39.                     var m = s.indexOf(v) + v.length;
  40.                     if (0 == s.indexOf(v)) {//取消第一个点击的勾选
  41.                         s = s.substring(n + v.length + 1, s.length);
  42.                     } else if (0 < s.indexOf(v) && ((s.indexOf(v) + v.length) < s.length)) {//取消非第一个和最后一个的勾选
  43.                         s = s.substring(0, n) + s.substring(n + v.length + 1, s.length);
  44.                     } else {//取消最后一个的勾选
  45.                         s = s.substring(0, n - 1);
  46.                     }
  47.                 }
  48.                 else {
  49.                     s = s + "," + $(this).next('span').text();//将勾选各值拼接
  50.  
  51.                 }
  52.                 $('#cc').combo('setValue', s).combo('setText', s).combo('showPanel');//将值赋值给文本框并在文本里显示出来
  53.             });
  54.         });
  55.     </script>
  56. </body>
  57. </html>

看一下效果图：

-----------------------------------------------------------------------------------------------------------------------------------------------------------

附：下面这是方便提交表单向提交页提交的是各项的ID，而不是文本，需要的看一下：

  1.  <td>
  2.                                  <select id="cc" style="width:150px"></select>
  3.                                  <div id="sp">
  4.                                      <div style="color:#99BBE8;background:#fafafa;padding:5px;">请选择渠道</div>
  5.                                      <div style="padding:5px">
  6.                                          @{
  7.                                              foreach (var item in ViewData["channelList"] as List<Channel>)
  8.                                              {
  9.                                                  int channel = item.ChannelID+1;
  10.                                                  <input type="checkbox" name="lang" value="@item.ChannelID"><span >@item.ChannelName</span><br />
  11.                                               }
  12.                                          }
  13.                                      </div>
  14.                                  </div>
  15.  
  16.                                  <script type="text/javascript">
  17.                                      $(function () {
  18.                                          var s = ",";//设定分隔付
  19.                                          var channelID = ",";
  20.                                          $('#cc').combo({
  21.                                              required: true,//是否验证
  22.                                              editable: true,//是否可编辑
  23.                                              multiple: true//可否支持多选
  24.                                          });
  25.                                          $('#sp').appendTo($('#cc').combo('panel'));
  26.                                          $('#sp input').click(function () {
  27.                                              var v = $(this).next('span').text();
  28.                                              var IDstr = $(this).val();
  29.                                              if ("," == s || "" == s) {//第一次勾选时起作用
  30.                                                  s = $(this).next('span').text();
  31.                                                  channelID = $(this).val();
  32.                                              }
  33.                                              else if (-1 < s.indexOf(v)) {//当去掉勾选时起作用  Indexof:返回某个指定的字符串值在字符串中首次出现的位置
  34.                                                  var n = s.indexOf(v);
  35.                                                  var m = s.indexOf(v) + v.length;
  36.                                                  var p = channelID.indexOf(IDstr);
  37.                                                  if (0 == s.indexOf(v)) {//取消第一个点击的勾选
  38.                                                      s = s.substring(n + v.length + 1, s.length);
  39.                                                      channelID = channelID.substring(n + IDstr.length + 1, channelID.length);
  40.                                                  } else if (0 < s.indexOf(v) && ((s.indexOf(v) + v.length) < s.length)) {//取消非第一个和最后一个的勾选
  41.                                                      s = s.substring(0, n) + s.substring(n + v.length + 1, s.length);
  42.                                                      channelID = channelID.substring(0, p) + channelID.substring(p + IDstr.length + 1, channelID.length);
  43.  
  44.                                                  } else {//取消最后一个的勾选
  45.                                                      s = s.substring(0, n - 1);
  46.                                                      channelID = channelID.substring(0, p - 1);
  47.                                                  }
  48.                                              }
  49.                                              else {
  50.                                                  s = s + "," + $(this).next('span').text();//将勾选各渠道名称拼接
  51.                                                  channelID = channelID + "," + $(this).val();//将勾选各渠道ID拼接
  52.                                              }
  53.  
  54.                                              $('#cc').combo('setValue', s).combo('setText', s).combo('showPanel');//将值赋值给文本框并在文本里显示出来
  55.                                              document.getElementById("hidden_channel").value = channelID;
  56.                                          });
  57.                                      });
  58.                                  </script>
  59.                                  <input id="hidden_channel" type="hidden" name="channel" />
  60.                              </td>

ok，完成，如果有问题或者优化建议联系QQ：2384834530

JS实现带复选框的下拉菜单的更多相关文章

  1. DOM（十）使用DOM设置单选按钮、复选框、下拉菜单

    1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为t ...

  2. JQuery对单选框，复选框，下拉菜单的操作

    JSP <%@ page language="java" import="java.util.*" pageEncoding="utf-8&qu ...

  3. layui 单选框、复选框、下拉菜单 不显示问题 记录

    1. 如果是 ajax嵌套了 页面, 请确保  只有最外层的页面引入了 layui.css 和 layui.js 内层页面 切记不要再次引入 2. layui.use(['form', 'upload ...

  4. jq获取单选框、复选框、下拉菜单的值

    1.<input type="radio" name="testradio" value="jquery获取radio的值" /> ...

  5. Easyui-combobox-checkbox-带复选框的下拉框

    $.post("getSubInsuranceTypeList.do",{parent_id:node.id},function(result){                  ...

  6. vue.js实现单选框、复选框和下拉框

    Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框   在传统的HTM ...

  7. [ PyQt入门教程 ] PyQt5基本控件使用:单选按钮、复选框、下拉框

    本文主要介绍PyQt5界面最基本使用的单选按钮.复选框.下拉框三种控件的使用方法进行介绍. 1.RadioButton单选按钮/CheckBox复选框.需要知道如何判断单选按钮是否被选中. 2.Com ...

  8. html基本标签表单实现交互原理，单选框，复选框，下拉框介绍

    表单是什么?表单是前端和服务器做交互的一种机制,表单收集用户输入信息,之后发送或者提交给服务器.用户在输入的信息称之为内容,内容的文本分为普通和密码型,用户通过单选框.复选框.下拉框(也就是下拉菜单) ...

  9. Selenium3自动化测试【28】单选框、复选框、下拉选择框

    Html页面中的单选按钮.复选框.下拉框均可通过WebDriver实现操做.本节结合案例一起来看看WebDriver如何操做这些控件. 同步视频知识与系列知识内容,可关注:[公众号]:柒哥测试:[WX ...

随机推荐

  1. 第三方框架之ThinkAndroid 学习总结（二）

    上文记录了一些ThinkAndroid常用的模块,本文继续介绍ThinkAndroid中的网络化模块. 按照惯例先上Github原文地址:https://github.com/white-cat/Th ...

  2. IntelliJ IDEA 15 激活码 正版 可离线激活

    43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0I0QTczWVlKIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiI ...

  3. android——自定义listView

    都知道微信主机面 有个界面会一行一一行的聊天记录,那个效果就可以用listview来实现(当然这只是其中的一种) listView是一种比较常见的组件它用来展示列的view,它是根据数据的长度来显示数 ...

  4. Unity - Apk包的代码与资源提取

    最近在研究如何给Unity游戏进行加密,让别人不能轻易破解你的apk包,不过网上的加密方法都是有对应的破解方法~_~!!结果加密方法没找到好的,逆向工程倒会了不少.今天就来讲解如何提取一个没做任何保护 ...

  5. Mpale 在汽车底盘悬架系统公差分析应用

    汽车底盘的作用是接受发动机的动力,使车轮转动,并保证汽车按驾驶员的操纵正常行驶.底盘包括传动系统.行驶系统.转向系统和制动系统这四大部分,通常,这四大系统也简称为传动系.行驶系.转向系和制动系.悬架是 ...

  6. 在java中如何用键盘输入一个数，字符，字符串

    一,利用 Scanner 实现从键盘读入integer或float 型数据 import java.util.*; public class test { public static void mai ...

  7. 安卓刷机--fastboot线刷

    首先需要下载fastboot.exe,copy到system32文件夹下. 对于安卓系统的智能手机,同时按住开机键和音量减键,或手机连上电脑,输入adb reboot bootloader进入fast ...

  8. .NET垃圾回收 – 原理浅析

    在开发.NET程序过程中,由于CLR中的垃圾回收(garbage collection)机制会管理已分配的对象,所以程序员就可以不用关注对象什么时候释放内存空间了.但是,了解垃圾回收机制还是很有必要的 ...

  9. 女生的最爱，装饰品。WPF也有，Adorner。（上海晒衣服理念）

    说到装饰,不由要说到女性. 去年过年回家给我妈买了周大福项链,很明显就感觉待遇就不一样了,即使这样,还是被一个阿姨说应该买更重点的.看来钱这种东西果然是多一点才好.虽然自己无所谓,但让家里人更开心也是 ...

  10. Python模拟HttpRequest的方法总结

    Python可以说是爬网的利器,本文主要介绍了一些python来模拟http请求的一些方法和技巧. Python处理请求的类库有两个,urllib,urllib2. 这两个类库并不是一个类库的两个不同 ...