It is not difficult for jQuery to operate on listbox. It is to move the selected items in listbox to achieve the moving effect we need. In this example, I used the json data structure to dynamically Bind The listbox, so that I can be familiar with the json usage.
Let's take a look at the simple html. Because the server control is automatically converted to an html Tag, I didn't use the server control in this example. As follows:
<Asp: ListBox> </asp: ListBox>
Will be automatically converted to: <select> </select>
The html code is as follows:
Copy codeThe Code is as follows:
<Div style = "width: 240px;">
<Div style = "width: 100px; float: left;">
<Select size = "4" name = "listLeft" id = "listLeft" class = "normal">
</Select>
</Div>
<Div style = "width: 40px; float: left; padding-top: 20px;">
<Input type = "button" id = "btnRight" value = ">"/> <br/>
<Input type = "button" id = "btnLeft" value = "<"/>
</Div>
<Div style = "width: 100px; float: left;">
<Select size = "4" name = "listRight" id = "listRight" class = "normal">
</Select>
</Div>
</Div>
The json data structure is as follows:
Copy codeThe Code is as follows:
// Data
Var vData = {"datalist ":
[
{"Data": "jQuery", "text": "jQuery "},
{"Data": "Asp.net", "text": "Asp.net "},
{"Data": "internet", "text": "internet "},
{"Data": "SQL", "text": "SQL "}
]
};
Below is the jQuery implementation code, where the key points are annotated.
Copy codeThe Code is as follows:
// Bind data
Var vlist = "";
// Traverse json data
JQuery. each (vData. datalist, function (I, n ){
Vlist + = "<option value =" + n. data + ">" + n. text + "</option> ";
});
// Bind data to listLeft
$ ("# ListLeft"). append (vlist );
// Left move
$ ("# BtnRight"). click (function (){
// Data option the selected data set is assigned to the variable vSelect
Var vSelect = $ ("# listLeft option: selected ");
// Add the cloned data to listRight.
VSelect. clone (). appendTo ("# listRight ");
// Remove option from listRight simultaneously
VSelect. remove ();
});
// Right move
$ ("# BtnLeft"). click (function (){
Var vSelect = $ ("# listRight option: selected ");
VSelect. clone (). appendTo ("# listLeft ");
VSelect. remove ();
});