<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作下拉框</title>
<script src="jss/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
<div class "first">
<select multiple name="hobby" id="hobby" class="sel">
<option value="游泳">游泳</option>
<option value="足球">足球</option>
<option value="篮球">篮球</option>
<option value="跑步">跑步</option>
<option value="溜冰">溜冰</option>
<option value="滑雪">滑雪</option>
<option value="摄影">摄影</option>
<option value="滑板">滑板</option>
<option value="爬山">爬山</option>
</select>
<div class="sd">
<button id="add">添加>></button> <br/><br/>
<button id="add_all">全部添加>></button>
</div>
</div>
<div class="second">
<select multiple name="other" id="other" class="sel"></select>
<div class="sd">
<button id="to_left"><<删除</button><br/><br/>
<button id="all_to_left"><<全部删除</button>
</div>
</div>
<script>
$(function(){
$("#add").click(function(){
var $options = $("#hobby option:selected"); //获取左边选中项
$options.appendTo("#other"); //追加到右边
})
$("#add_all").click(function(){
var $options = $("#hobby option"); //获取全部选项
$options.appendTo("#other"); //追加到右边
})
$("#hobby").dblclick(function(){ //鼠标双击事件
var $options = $("option:selected" ,this); //获取选中项
$options. appendTo("#other"); //追加到右边
})
$("#to_left").click(function(){
var $options=$("#other option:selected"); //获取右边选中项
$options. appendTo("#hobby"); //追加到左边
})
$("#all_to_left").click(function(){
var $options = $("#other option"); //获取全部选项
$options. appendTo("#hobby"); //追加到左边
})
$("#other").dblclick(function(){ //鼠标双击事件
var $options=$("option:selected",this); //获取选中项
$options.appendTo("#hobby"); //追加到左边
})
})
</script>
</body>
</html>
07-08
07-08
07-08
07-08
07-08
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交