装载自《锋利的JQuery》第五章
<select name="before" class="before" multiple="multiple" style="width: 100px; height: 200px;">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
</select>
<button class="select">></button>
<button class="selectAll">>></button>
<select name="after" class="after" multiple="multiple" style="width: 100px; height: 200px;">
//将选中的选项移动到另一个下拉框
$(".select").click(function(){
var selected=$('select[name="before"] option:selected');
selected.appendTo(".after");
})
//将所有选项移动到另一个下拉框
$(".selectAll").click(function(){
var options=$(".before option");
$("select[name='after']").append(options);
})
//双击选项移动到另一个下拉框
$(".after option").dblclick(function(){
var selected1=$(this);
selected1.appendTo(".before");
});
//运行后该事件无效
//初始状态下 .after 下并没有option ,因此双击事件并没有被绑定,应改成如下代码
$(".after").dblclick(function(){
// var selected1=$("option:selected",this);
//或者
var selected1=$(this).find("option:selected");
selected1.appendTo(".before");
});