<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作下拉框</title>
<script type="text/javascript"src="js/jquery-1.11.1.min.js"></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"><lect>
<div class="sd">
<button id="to_left"><< 删除 <tton><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>
操作下拉框
最新推荐文章于 2024-06-27 19:38:44 发布