Implement the drop-down Box Based on jQuery and implement the drop-down Box Based on jQuery

Implement the drop-down Box Based on jQuery and implement the drop-down Box Based on jQuery

Projects often encounter drop-down boxes. Today, when flattening and responsive layout are widely used, it is very necessary to use jQuery to implement drop-down boxes, and it will also look a lot better, here we recommend a jQuery-based drop-down box code.

JQuery code:

Copy codeThe Code is as follows:
$ (Function (){
$ ('# Add'). click (function (){
Var $ options = $ ('# select1 option: selected ');
$ Options. appendTo ("# select2 ");
});
$ ('# Delete'). 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); // obtain the selected option
$ Options. appendTo ('# select2 ');
});
$ ('# Select2'). dblclick (function (){
Var $ options = $ ("option: selected", this); // obtain the selected option
$ Options. appendTo ('# select1 ');
});
});

HTML code:

Copy codeThe Code is 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"> Add all to the right >></span>
</Div>
</Div>
<Div style = "float: right;">
<Select multiple id = "select2" style = "width: 100px; height: 160px;">
</Select>
<Div>
<Span id = "remove"> <selected to be deleted to the left </span> <br>
<Span id = "remove_all"> <delete all to the left </span>
</Div>
</Div>
</Div>

Is it easy? If necessary, you can use the tool in the project.