JQuery-js-based drop-down box

This article will share with you a piece of jQuery-based drop-down box code. If you have the same requirements, you can use it yourself. 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:

The 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:

The Code is as follows:

Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 7 Option 8

Select Add to right>

Add all to the right>

< <选中删除到左边

< <全部删除到左边

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