jquery的方式完成下拉表框的左右选择,这是网站制作的基本操作
编程代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script>
$(function(){
//移一个
$("#one").click(function(){
$("#selone option:selected").appendTo($("#seltwo"));
});
//移全部
$("#all").click(function(){
alert("111");
$("#selone option").appendTo($("#seltwo"));
});
//双击移动
$("#selone").dblclick(function(){
$("#selone option:selected").appendTo($("#seltwo"));
});
});
</script>
</head>
<body>
<input type="button" value="移一个" id="one" />
<input type="button" value="移全部" id="all"/>
<select multiple="multiple" id="selone">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select multiple="multiple" id="seltwo">
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</body>
</html>
代码效果为
这个代码有三个功能,分别是选中哪个然后点击移一个,或者是移动全部,还有一个功能是双击点击移动到右边的下拉表框,下拉表框的属性multiple的效果就是显示多个这样拉下来,而不是只有一个一个的拉,没有必要用滚动条了。