关于下拉框左右选择的实例代码
程序员文章站
2022-05-07 11:46:08
...
//下拉框左右选择
<!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>以上就是关于下拉框左右选择的实例代码的详细内容，更多请关注其它相关文章！