Principle and code of jquery mobile listbox Value

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.