这段时间在做后台的时候需要一个可以复选的下拉菜单，用到的是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:0; 9 } 10 h2 { 11 font-size:18px; 12 font-weight:bold; 13 margin:0; 14 margin-bottom:15px; 15 } 16 .demo-info{ 17 padding:0 0 12px 0; 18 } 19 .demo-tip{ 20 display:none; 21 }
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="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，而不是文本，需要的看一下：
1 <td> 2 <select id="cc" style="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