Today this demo is about the dropdown box.
Copy Code code 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" > All add to 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 option to the right, double-click an option on the left to add to the right, click on all add to the right button to add to the right to the left.
jquery Code:
Copy Code code 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 the mouse double-clicks the event.
Other methods and events before the examples are introduced, do not say.
This demo code is simple. And the function is also said to be practical.
