Examples of dom operations and events in jquery

Today's demo is about the drop-down box.
Copy codeThe Code is as follows:
<Div class = "centent">
<Select multiple = "multiple" id = "select1" style = "width: 100px; height: 160px;">
<Option value = "1"> option 1 </option>
<Option value = "2"> option 2 </option>
<Option value = "3"> option 3 </option>
<Option value = "4"> option 4 </option>
<Option value = "5"> option 5 </option>
<Option value = "6"> option 6 </option>
<Option value = "7"> option 7 </option>
</Select>
<Div>
<Span id = "add"> select add to right> </span>
<Span id = "add_all"> Add all to the right >></span>
</Div>
</Div>
<Div class = "centent">
<Select multiple = "multiple" id = "select2" style = "width: 100px; height: 160px;">
<Option value = "8"> option 8 </option>
</Select>
</Div>

The function is to add the selected options on the left to the right, and double-click an option on the left to the right. Click the add all button on the right to add the options on the left to the right.
Jquery code:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Function (){
$ ('# Add'). click (function (){
Var $ option = $ ('# select1 option: selected ');
$ Option. appendTo ('# select2 ');
})
$ ('# Add_all'). click (function (){
Var $ option = $ ('# select1 option ');
$ Option. appendTo ('# select2 ');
})
$ ('# Select1'). dblclick (function (){
Var $ option = $ ('option: selected', this );
$ Option. appendTo ('# select2 ');
})
})
</Script>

Dblclick () is triggered when you double-click the mouse.
Other methods and examples before the event are described.
The demo code is simple. And the function is practical.