The value principle and code _jquery of jquery Mobile ListBox

The jquery operation ListBox principle is not difficult, is to move the selected items in the listbox to achieve the moving effect we need. I used the JSON data structure to dynamically bind the listbox in the example, so I can familiarize myself with how JSON is used.

First look at the simple HTML, because the server control is automatically converted to HTML tags, so in the example, I did not use the server control. As follows:
<asp:ListBox></asp:ListBox>
is automatically converted to:<select></select>
The HTML code is as follows:

Copy Code code 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 Code code 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 key points are commented.

Copy Code code 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 selected data set assigned to variable Vselect
var vselect = $ ("#listLe FT option:selected ");
///Clone data added to Listright
Vselect.clone (). Appendto ("#listRight");
//Remove option in Listright
Vselect.remove ();
});
//right Move
$ ("#btnLeft"). Click (function () {
var vselect = $ ("#listRight option:selected");
Vselect.clone (). Appendto ("#listLeft");
Vselect.remove ();
});