Jquery-Based Multi-choice drop-down list box

The drop-down list box found by colleagues on the Internet has a wrong location and slow loading BUG. It is also very easy to select multiple drop-down lists. Instead of looking at the code with chaotic structures, you can try again.

First effect: http://demo.jb51.net/js/2012/jquery_demo/jquery_select.html

JS:
Copy codeThe Code is as follows:
(Function ($ ){
$. Fn. extend ({
MultDropList: function (options ){
Var op = $. extend ({wraperClass: "wraper", width: "150px", height: "200px", data: "", selected: ""}, options );
Return this. each (function (){
Var $ this = $ (this); // point to TextBox
Var $ hf = $ (this). next (); // point to the hidden Control
Var conSelector = "#" + $ this. attr ("id") + ", #" + $ hf. attr ("id ");
Var $ wraper = $ (conSelector ). wrapAll ("<div> </div> "). parent (). parent (). addClass (op. wraperClass );
Var $ list = $ ('<div class = "list"> </div>'). appendTo ($ wraper );
List.css ({"width": op. width, "height": op. height });
// Control the display and hide of the pop-up page
$ This. click (function (e ){
$ List. toggle ();
E. stopPropagation ();
});
$ (Document). click (function (){
$ List. hide ();
});
$ List. filter ("*"). click (function (e ){
E. stopPropagation ();
});
// Load default data
$ List. append ('<ul> <li> <input type = "checkbox" class = "selectAll" value = ""/> <span> all </span> </li> </ul> ');
Var $ ul = $ list. find ("ul ");
// Load json data
Var listArr = op. data. split ("| ");
Var jsonData;
For (var I = 0; I <listArr. length; I ++ ){
JsonData = eval ("(" + listArr [I] + ")");
$ Ul. append ('<li> <input type = "checkbox" value = "' + jsonData. k + '"/> <span>' + jsonData. v + '</span> </li> ');
}
// Load the check box
Var seledArr;
If (op. selected. length> 0 ){
SeledArr = selected. split (",");
}
Else {
SeledArr = $ hf. val (). split (",");
}
$. Each (seledArr, function (index ){
$ ("Li input [value = '" + seledArr [index] + "']", $ ul). attr ("checked", "checked ");
Var vArr = new Array ();
$ ("Input [class! = 'Selectall']: checked ", $ ul). each (function (index ){
VArr [index] = $ (this). next (). text ();
});
$ This. val (vArr. join (","));
});
// Select all or none
$ ("Li: first input", $ ul). click (function (){
If ($ (this). attr ("checked ")){
$ ("Li input", $ ul). attr ("checked", "checked ");
}
Else {
$ ("Li input", $ ul). removeAttr ("checked ");
}
});
// When other check boxes are clicked, the hidden control value and text box value are updated.
$ ("Input", $ ul). click (function (){
Var kArr = new Array ();
Var vArr = new Array ();
$ ("Input [class! = 'Selectall']: checked ", $ ul). each (function (index ){
KArr [index] = $ (this). val ();
VArr [index] = $ (this). next (). text ();
});
$ Hf. val (kArr. join (","));
$ This. val (vArr. join (","));
});
});
}
});
}) (JQuery );
$ (Document). ready (function (){
$ ("# TxtTest"). MultDropList ({data: $ ("# hfddlList"). val ()});
});
</Script>

CSS:
Copy codeThe Code is as follows:
. Wraper
{
Position: relative;
}
. List
{
Width: 200px;
Height: 200px;
Overflow: auto;
Position: absolute;
Border: 1px solid #617775;
Display: none;
Background: none repeat scroll 0 0 # F0F6E4;
Float: left;
}
. List ul li
{
Padding-left: 10px;
Padding-top: 2px;
Padding-bottom: 2px;
Border-top: 1px solid black;
}
Ul
{
List-style: none outside none;
}

HTML:
Copy codeThe Code is as follows:
<Asp: HiddenField ID = "hfddlList" runat = "server" Value = '{k: 1, v: "Nanjing"} | {k: 2, v: "Shanghai"} | {k: 3, v: "Yangzhou"} | {k: 4, v: "Suzhou"} | {k: 5, v: "Wuxi"} | {k: 6, v: "Changzhou"} | {k: 7, v: "Yancheng"} | {k: 8, v: "Xuzhou"} | {k: 9, v: "Taizhou"} | {k: 10, v: "Huaian"} '/>
<Div class = "testContainer">
<Br/>
<Br/>
<Br/>
<Br/>
<Div style = "margin-left: 300px; height: 30px;">
<Asp: TextBox ID = "txtTest" runat = "server" Width = "150px"> </asp: TextBox>
<Asp: HiddenField ID = "hfTest" runat = "server" Value = "3, 5"/>
</Div>
</Div>