//下拉框左右选择
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>title</title><style>.left, .right {float: left;height: 250px;width: 120px;margin-left: 10px;}#select1, #select2 {height: 200px;width: 120px;}</style><script src="js/jquery-1.11.3.min.js?1.1.11"></script><script> $(function () {
$(#buttonl1).click(function () {
$('#select1 option:selected').appendto('#select2');
});
$(#buttonl2).click(function () { var $reall=$(#select1 option);
$reall.appendto($(#select2));
})
$(#buttonr1).click(function () {
$(#select2 option:selected).appendto(#select1);
})
$(#buttonr2).click(function () { var $reall=$(#select2 option);
$reall.appendto($(#select1));
}) //双击选项 $('#select1').dblclick(function(){ //绑定双击事件 //获取全部的选项,删除并追加给对方 $(option:selected,this).appendto('#select2'); //追加给对方 }); //双击选项 $('#select2').dblclick(function(){
$(option:selected,this).appendto('#select1');
});
})</script>
</head>
<body>
<div class="left"><select name="select1" id="select1" multiple="multiple">
<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>
</select>
<input type="button" value="选中添加到右边>>" id="buttonl1">
<input type="button" value="全部添加到右边>>" id="buttonl2"></div><div class="right"><select name="select2" id="select2" multiple="multiple"><option value="8">选项8</option></select><input type="button" value="<<选中删除到左边" id="buttonr1"><input type="button" value="<<全部删除到左边" id="buttonr2"></div></body></html>
以上就是关于下拉框左右选择的实例代码的详细内容。