Er. It's actually very simple. Page chart
You can select multiple lists,
Achieve the following results:
1. Double-click any item in the first list to add it down.
2. Double-click any item in the second list to delete it,
2. click the button to implement the corresponding function.
Html code
Copy codeThe Code is as follows:
<Form name = "form1" method = "post" action = "">
<Select id = "select1" size = "5" multiple style = "width: 100px">
<Option value = "111"> Beijing </option>
<Option value = "222"> Shanghai </option>
<Option value = "333"> Guangzhou </option>
<Option value = "333"> Shandong </option>
<Option value = "333"> Changzhou </option>
</Select> <br/>
<Input type = "button" id = "button1" value = "add">
<Input type = "button" id = "button2" value = "delete"> <br/>
<Select id = "select2" size = "5" multiple style = "width: 100px">
</Select>
</Form>
Jquery code
Copy codeThe Code is as follows:
<Script src = "js/jquery-1.6.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Select1"). dblclick (function () {$ ("# select1: selected"). appendTo ($ ("# select2 "));});
$ ("# Select2"). dblclick (function () {$ ("# select2: selected"). appendTo ($ ("# select1 "));});
$ ("# Button1"). click (function () {$ ("# select1 option: selected"). appendTo ($ ("# select2 "));});
$ ("# Button2"). click (function () {$ ("# select2 option: selected"). appendTo ($ ("# select1 "));});
})
</Script>