这段时间在做后台的时候需要一个可以复选的下拉菜单，用到的是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="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，而不是文本，需要的看一下：
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：836479387
时间： 2024-10-14 08:55:37