项目中经常会遇到下拉框，在扁平化和响应式布局大行其道的今天，使用jQuery来实现下拉框就十分的必要了，而且也会美观很多，这里就给大家推荐一段基于jQuery的下拉框代码。

jQuery代码：

复制代码 代码如下:

$(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); //获取选中的选项

$options.appendTo('#select2');

});

$('#select2').dblclick(function(){

var $options = $("option:selected",this); //获取选中的选项

$options.appendTo('#select1');

});

});

HTML代码：

复制代码 代码如下:

<div>

<div>

<select multiple id="select1">

<option value="1">选项1</option>

<option value="2">选项2</option>

<option value="3">选项3</option>

<option value="4">选项4</option>

<option value="5">选项5</option>

<option value="6">选项6</option>

<option value="7">选项7</option>

<option value="8">选项8</option>

</select>

<div>

<span id="add">选中添加到右边>></span><br>

<span id="add_all">全部添加到右边>></span>

</div>

</div>

<div>

<select multiple id="select2">

</select>

<div>

<span id="remove"><<选中删除到左边</span><br>

<span id="remove_all"><<全部删除到左边</span>

</div>

</div>

</div>

是不是很简单？小伙伴们需要的话直接就可以拿到项目中使用了。