怎么实现下拉框的多选功能
0
其他回答(1)
0
<ul><li></li></ul>实现
USERCONTROL
1 <%@ Control Language="C#" AutoEventWireup="true" CodeFile="DropDownSelect.ascx.cs"
2 Inherits="DropDownSelect" %>
3 <style type="text/css">
4
5 .x-combo-list-item {
6 padding:2px;
7 border:1px solid;
8 white-space: nowrap;
9 overflow:hidden;
10 text-overflow: ellipsis;
11 border-color:#fff;
12 cursor:pointer;
13 }
14 .dropList-item
15 {
16 padding:2px;
17 border:1px solid;
18 white-space: nowrap;
19 overflow:hidden;
20 text-overflow: ellipsis;
21 border-color:#fff;
22 cursor:pointer;
23 }
24 .x-shadow {
25 display: none;
26 position: absolute;
27 overflow: hidden;
28 left:0;
29 top:0;
30 }
31 .x-shadow * {
32 overflow: hidden;
33 }
34 .x-shadow * {
35 padding: 0;
36 border: 0;
37 margin: 0;
38 clear: none;
39 zoom: 1;
40 }
41 .x-shadow .xstc, .x-shadow .xsbc {
42 height: 6px;
43 float: left;
44 }
45 .x-shadow .xstl, .x-shadow .xstr, .x-shadow .xsbl, .x-shadow .xsbr {
46 width: 6px;
47 height: 6px;
48 float: left;
49 }
50
51
52 .x-shadow .xsc {
53 width: 100%;
54 }
55
56 .x-shadow .xsml, .x-shadow .xsmr {
57 width: 6px;
58 float: left;
59 height: 100%;
60 }
61
62 .x-shadow .xsmc {
63 float: left;
64 height: 100%;
65 background: transparent;
66 }
67
68 .x-shadow .xst, .x-shadow .xsb {
69 height: 6px;
70 overflow: hidden;
71 width: 100%;
72 }
73
74 .x-shadow .xsml {
75 background: transparent repeat-y 0 0;
76 }
77
78 .x-shadow .xsmr {
79 background: transparent repeat-y -6px 0;
80 }
81
82 .x-shadow .xstl {
83 background: transparent no-repeat 0 0;
84 }
85
86 .x-shadow .xstc {
87 background: transparent repeat-x 0 -30px;
88 }
89
90 .x-shadow .xstr {
91 background: transparent repeat-x 0 -18px;
92 }
93
94 .x-shadow .xsbl {
95 background: transparent no-repeat 0 -12px;
96 }
97
98 .x-shadow .xsbc {
99 background: transparent repeat-x 0 -36px;
100 }
101
102 .x-shadow .xsbr {
103 background: transparent repeat-x 0 -6px;
104 }
105 .x-shadow .xsmc {
106 background-image: url(images/shadow-c.png);
107 }
108 .x-shadow .xsml, .x-shadow .xsmr {
109 background-image: url(images/shadow-lr.png);
110 }
111 .x-shadow .xstl, .x-shadow .xstc, .x-shadow .xstr, .x-shadow .xsbl, .x-shadow .xsbc, .x-shadow .xsbr{
112 background-image: url(images/shadow.png);
113 }
114 .checkbox
115 {
116 background-image: url(images/unchecked.gif) ; background-repeat:no-repeat; border:1px solid green; border:0px; background-position:top 0;
117 }
118 </style>
119
120 <script language="javascript" type="text/javascript">
121 var <%=drowdownCheckList.ClientID %>isShow='N';
122 $(document.body).ready(function()
123 {
124 <%=drowdownCheckList.ClientID %>PageInint();
125 $(document).click(function(event)
126 {
127 <%=drowdownCheckList.ClientID %>PageClick(event);
128 });
129 $("#<%=drowdownCheckList.ClientID%>").find("img").click(function()
130 {
131 if (<%=drowdownCheckList.ClientID %>isShow=='N')
132 {
133 $("#<%=checkItemList.ClientID%>").show();
134 $("#<%=shadow.ClientID %>").show();
135 <%=drowdownCheckList.ClientID %>isShow='Y';
136 }
137 else
138 {
139 $("#<%=checkItemList.ClientID%>").hide();
140 $("#<%=shadow.ClientID %>").hide();
141 <%=drowdownCheckList.ClientID %>isShow='N';
142 }
143 });
144 $("#<%=showSELECTVAL.ClientID%>").click(function()
145 {
146 if (<%=drowdownCheckList.ClientID %>isShow=='N')
147 {
148 $("#<%=checkItemList.ClientID%>").show();
149 $("#<%=shadow.ClientID %>").show();
150 <%=drowdownCheckList.ClientID %>isShow='Y';
151 }
152 else
153 {
154 $("#<%=checkItemList.ClientID%>").hide();
155 $("#<%=shadow.ClientID %>").hide();
156 <%=drowdownCheckList.ClientID %>isShow='N';
157 }
158 });
159 $("#<%=drowdownCheckList.ClientID %>").find("div.dropList-item").hover(function()
160 {
161 $(this).css({"background-color":"#dfe8f6",border:"1px dashed #7EADD9"});
162 },function()
163 {
164 $(this).css({"background-color":"#ffffff",border:"1px solid #fff"});
165 });
166 $("#<%=drowdownCheckList.ClientID %>").find("div.dropList-item").find("input[type=checkbox]").click(function()
167 {
168
169 var newVal=null;
170 var labVal=null;
171 var ckIdval=null;
172 $("#<%=drowdownCheckList.ClientID %>").find("div.dropList-item").find("input[type=checkbox][checked]").each(function()
173 {
174 var val=$(this).val();
175 var id=$(this).attr("id");
176 var lab=$.trim($("#<%=drowdownCheckList.ClientID %>").find("div.dropList-item").find("label[for="+id+"]").html());
177 if(newVal==null)
178 {
179 newVal="'"+val+"'";
180 labVal= lab;
181 ckIdval=id;
182 }
183 else
184 {
185 newVal="'"+val+"',"+newVal;
186 labVal=lab+","+labVal;
187 ckIdval=id+","+ckIdval;
188 }
189
190 });
191 if(newVal!=null)
192 {
193 $("#<%=hiddenval.ClientID%>").val(newVal);
194 $("#<%=showSELECTVAL.ClientID %>").val(labVal);
195 $("#<%=hiddenchid.ClientID %>").val(ckIdval);
196 }
197 else
198 {
199 $("#<%=hiddenval.ClientID%>").val("");
200 $("#<%=showSELECTVAL.ClientID %>").val("");
201 $("#<%=hiddenchid.ClientID %>").val("");
202 }
203 });
204
205 });
206 function <%=drowdownCheckList.ClientID %>PageInint()
207 {
208 var val=$("#<%=hiddenchid.ClientID %>").val();
209 if(val!="")
210 {
211 var properties= val.split(",");
212 for(i=0;i<properties.length;i++)
213 {
214 var id= properties[i];
215 $("#"+id).attr("checked","checked");
216 }
217 }
218
219 }
220 function <%=drowdownCheckList.ClientID %>PageClick(event)
221 {
222 var mLeft=$("#<%=drowdownCheckList.ClientID%>").offset().left;
223 var mTop=$("#<%=drowdownCheckList.ClientID%>").offset().top;
224 var mWidth=$("#<%=drowdownCheckList.ClientID%>").width();
225 var mHeight=$("#<%=drowdownCheckList.ClientID%>").attr("ahei");
226 mHeight=parseFloat(mHeight);
227 var bodyScrollTop= document.documentElement.scrollTop || document.body.scrollTop;
228 var bodyScrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
229 bodyScrollTop=event.clientY+bodyScrollTop;
230 bodyScrollLeft=event.clientX+bodyScrollLeft;
231 var lLeft=mLeft+mWidth;
232 var lTop=mTop+mHeight+20;
233 if(!(bodyScrollTop>=mTop && bodyScrollTop<=lTop && bodyScrollLeft>=mLeft && bodyScrollLeft<=lLeft) && <%=drowdownCheckList.ClientID %>isShow=='Y')
234 {
235 $("#<%=checkItemList.ClientID%>").hide();
236 $("#<%=shadow.ClientID %>").hide();
237 <%=drowdownCheckList.ClientID %>isShow='N';
238 }
239 }
240
241
242 </script>
243
244 <div id='drowdownCheckList' runat="server" style="margin: 0px; padding: 0px; white-space: nowrap;
245 word-spacing: normal;">
246 <input type="text" id="showSELECTVAL" runat="server" style="background-color: #fff;
247 border: 1px solid #7eadd9; white-space: pre-line; line-height: 18px; vertical-align: middle;
248 height: 17px; margin-bottom: 1px; padding-top: 2px; background-image: url(images/text-bg.gif);
249 padding-bottom: 0px; padding-left: 3px; padding-right: 3px; background-repeat: repeat-x;
250 font-family: Arial;" /><img style="white-space: pre-line; width: 17px; position: absolute; border-bottom: 1px solid #7eadd9;
251 background-position: -51px 0px; cursor: pointer; height: 20px; top: 0px; background-image: url(images/trigger.gif);"
252 src="Images/s.gif" alt='' />
253 <input type="hidden" id="hiddenval" runat="server" style="display: none" />
254 <input type="hidden" id="hiddenchid" runat="server" style="display: none" />
255 <div style="z-index: 10999; display: block; margin-top: 26px; display: none; margin-left: -4px;"
256 class="x-shadow" runat="server" id="shadow">
257 <div class="xst">
258 <div class="xstl">
259 </div>
260 <div style="width: <%=(Width-12)%>px;" class="xstc">
261 </div>
262 <div class="xstr">
263 </div>
264 </div>
265 <div style="height: <%=Height-12%>px;" class="xsc">
266 <div class="xsml">
267 </div>
268 <div style="width: <%=(Width-12)%>px;" class="xsmc">
269 </div>
270 <div class="xsmr">
271 </div>
272 </div>
273 <div class="xsb">
274 <div class="xsbl">
275 </div>
276 <div style="width: <%=(Width-12)%>px;" class="xsbc">
277 </div>
278 <div class="xsbr">
279 </div>
280 </div>
281 </div>
282 <div style="z-index: 11000; margin-left: 0px; font-size: 12px; border: 1px solid #98c0f4;
283 font-family: Arial; display: none; position: absolute; top: 22px; left: 0px;"
284 id="checkItemList" runat="server">
285 <div style="overflow: auto; background: white;" class="x-combo-list-inner" runat="server"
286 id="ck_content">
287 <div class="dropList-item">
288 <input type="checkbox" value="1" id="drowdownCheckList_ck1" />
289 <label for="drowdownCheckList_ck1">
290 Test1</label></div>
291 <div class="dropList-item ">
292 <input type="checkbox" value="2" id="drowdownCheckList_ck2" />
293 <label for="drowdownCheckList_ck2">
294 Test2</label></div>
295 <div class="dropList-item">
296 <input type="checkbox" value="3" id="drowdownCheckList_ck3" /><label for="drowdownCheckList_ck3">
297 Test3</label></div>
298 <div class="dropList-item">
299 <input type="checkbox" value="4" id="drowdownCheckList_ck4" /><label for="drowdownCheckList_ck4">
300 Test4</label></div>
301 <div class="dropList-item">
302 <input type="checkbox" value="5" id="drowdownCheckList_ck5" /><label for="drowdownCheckList_ck5">
303 Test5</label></div>
304 <div class="dropList-item">
305 <input type="checkbox" value="6" id="drowdownCheckList_ck6" /><label for="drowdownCheckList_ck6">
306 Test6</label></div>
307 <div class="dropList-item">
308 <input type="checkbox" value="7" id="drowdownCheckList_ck7" /><label for="drowdownCheckList_ck7">
309 Test7</label></div>
310 </div>
311 </div>
312 </div>
313
back
代码
1 public partial class DropDownSelect : System.Web.UI.UserControl
2 {
3 protected void Page_Load(object sender, EventArgs e)
4 {
5 this.Page.ClientScript.RegisterClientScriptInclude("JQUERY", "JS/jquery-1.3.2.min.js");
6 if (!IsPostBack)
7 {
8 Response.Write("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
9 drowdownCheckList.Style.Add("width", Width.ToString() + "px");
10 drowdownCheckList.Style.Add("position", position.ToString());
11 drowdownCheckList.Style.Add("left", Left.ToString() + "px");
12 drowdownCheckList.Style.Add("top", Top.ToString() + "px");
13 drowdownCheckList.Attributes.Add("ahei", Height.ToString());
14
15 showSELECTVAL.Style.Add("width", (Width - 33).ToString() + "px");
16 shadow.Style.Add("width", Width.ToString() + "px");
17 shadow.Style.Add("height", Height.ToString() + "px");
18 checkItemList.Style.Add("Width", (Width - 10).ToString() + "px");
19 checkItemList.Style.Add("height", (Height - 2).ToString() + "px");
20 ck_content.Style.Add("height", (Height - 2).ToString() + "px");
21 ck_content.Style.Add("width", (Width - 10).ToString() + "px");
22 if (Items.Count > 0)
23 {
24 int i = 0;
25 ck_content.InnerHtml = "";
26 foreach (ListItem li in Items)
27 {
28 i++;
29 ck_content.InnerHtml = ck_content.InnerHtml + " <div class=\"dropList-item\"> <input type=\"checkbox\" value=\"" + li.Value + "\" id=\"" + this.ClientID + "drowdownCheckList_ck" + i.ToString() + "\" /><label for=\"" + this.ClientID + "drowdownCheckList_ck" + i.ToString() + "\"> " + li.Text + "</label></div>";
30 }
31 }
32 }
33 }
34 private ListItemCollection listCollection = new ListItemCollection();
35 /// <summary>
36 ///
37 /// 內容值
38 /// </summary>
39 public ListItemCollection Items
40 {
41 get { return listCollection; }
42 set { listCollection = value; }
43 }
44 /// <summary>
45 /// 選擇值
46 /// </summary>
47 public string SelectValue
48 {
49 get { return hiddenval.Value; }
50 }
51 private int _width = 110;
52 private int _height = 200;
53 private Position _position = Position.Relative;
54 private int _top = 0;
55 private int _left = 0;
56 /// <summary>
57 /// 寬度
58 /// </summary>
59 public int Width
60 {
61 get { return _width; }
62 set { _width = value; }
63 }
64 /// <summary>
65 /// 高度
66 /// </summary>
67 public int Height
68 {
69 get { return _height; }
70 set { _height = value; }
71 }
72 /// <summary>
73 /// 位置
74 /// </summary>
75 public Position position
76 {
77 get { return _position; }
78 set { _position = value; }
79 }
80 /// <summary>
81 /// Top
82 /// </summary>
83 public int Top
84 {
85 get { return _top; }
86 set { _top = value; }
87 }
88 /// <summary>
89 /// Left
90 /// </summary>
91 public int Left
92 {
93 get { return _left; }
94 set { _left = value; }
95 }
96 public enum Position
97 {
98 Relative,
99 Absolute,
100 Fixed
101 }
102 }
usage
<ul:DropDownSelect ID="DropDownSelect1" runat="server" Width="200" position="Absolute"
Left="200" Top="100" />
代码
1 DropDownSelect1.Items.Add(new ListItem("AAAAAAAAA", "AA"));
2 DropDownSelect1.Items.Add(new ListItem("BBBB", "BB"));
3 DropDownSelect1.Items.Add(new ListItem("DD", "CC"));
4 DropDownSelect1.Items.Add(new ListItem("AAAADSAD", "DD"));
5 DropDownSelect1.Items.Add(new ListItem("BASDSAFS", "DD"));
6 DropDownSelect1.Items.Add(new ListItem("WRWSSA", "DD"));
7 DropDownSelect1.Items.Add(new ListItem("WRWSSA", "DD"));
8 DropDownSelect1.Items.Add(new ListItem("WRWSSA", "DD"));
9 DropDownSelect1.Items.Add(new ListItem("AAAAAAAAA", "AA"));
10 DropDownSelect1.Items.Add(new ListItem("BBBB", "BB"));
11 DropDownSelect1.Items.Add(new ListItem("DD", "CC"));
12 DropDownSelect1.Items.Add(new ListItem("AAAADSAD", "DD"));
13 DropDownSelect1.Items.Add(new ListItem("BASDSAFS", "DD"));
14 DropDownSelect1.Items.Add(new ListItem("WRWSSA", "DD"));
15 DropDownSelect1.Items.Add(new ListItem("WRWSSA", "DD"));
16 DropDownSelect1.Items.Add(new ListItem("WRWSSA", "DD"));
17 }
18 TXT_VALUE.Text = DropDownSelect1.SelectValue;
1
jQuery MultiSelect是一个可配置的jQuery插件。它将普通的列表框表单控件转换成带有CheckBox的下拉列表控件。
用这个吧，简单方便，还好用
