Projects often encounter a Drop-down box, in the flat and responsive layout of the road today, using jquery to implement the Drop-down box is very necessary, but also a lot of beautiful, here to recommend a piece of jquery based on the dropdown box code.
jquery Code:
Copy Code code as follows:
$ (function () {
$ (' #add '). Click (function () {
var $options = $ (' #select1 option:selected ');
$options. Appendto ("#select2");
});
$ (' #remove '). Click (function () {
var $options = $ (' #select2 option:selected ');
$options. Appendto ("#select1");
});
$ (' #add_all '). Click (function () {
var $options = $ (' #select1 option ');
$options. Appendto ("#select2");
});
$ (' #remove_all '). Click (function () {
var $options = $ (' #select2 option ');
$options. Appendto ("#select1");
});
$ (' #select1 '). DblClick (function () {
var $options = $ ("option:selected", this); Get the selected option
$options. Appendto (' #select2 ');
});
$ (' #select2 '). DblClick (function () {
var $options = $ ("option:selected", this); Get the selected option
$options. Appendto (' #select1 ');
});
});
HTML code:
Copy Code code as follows:
<div style= "width:250px" >
<div class= "Content" style= "Float:left" >
<select 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>
<option value= "8" > Option 8</option>
</select>
<div>
<span id= "Add" > select Add to Right >></span><br>
<span id= "Add_all" > All add to Right >></span>
</div>
</div>
<div style= "float:right;" >
<select multiple id= "Select2" style= "width:100px;height:160px"; >
</select>
<div>
<span id= "Remove" ><< select Remove to left </span><br>
<span id= "Remove_all" ><< all deleted to left </span>
</div>
</div>
</div>
Is it simple? The small partners need to be able to get the project used directly.
