Principle and code of jquery mobile listbox Value

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 ();
});