How jquery moves the value of listbox and its code _ jquery

It is not difficult for jQuery to operate on listbox. It is to move the selected items in listbox to achieve the desired moving effect. The following is an example, if you are interested, it is not difficult to learn how jQuery operates listbox. It is to move the selected items in listbox to achieve the desired moving effect. 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:

Will be automatically converted:
The html code is as follows:

The Code is as follows:

The json data structure is as follows:

The 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.

The Code is as follows:

// Bind data
Var vlist = "";
// Traverse json data
JQuery. each (vData. datalist, function (I, n ){
Vlist + =""+ N. text +"";
});
// 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 ();
});