jquery实现下拉框多选
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jquery多选select</title>
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#add').click(function(){
var $options = $('#select1 option:selected');//获取当前选中的项
var $remove = $options.remove();//删除下拉列表中选中的项
$remove.appendTo('#select2');//追加给对方
});
$('#remove').click(function(){
var $removeOptions = $('#select2 option:selected');
$removeOptions.appendTo('#select1');//删除和追加可以用appendTo()直接完成
});
$('#addAll').click(function(){
var $options = $('#select1 option');
$options.appendTo('#select2');
});
$('#removeAll').click(function(){
var $options = $('#select2 option');
$options.appendTo('#select1');
});
//双击事件
$('#select1').dblclick(function(){
//var $options = $('#select1 option:selected');
var $options = $('option:selected', this);//注意此处“option”与“:”之间的空格，有空格是不可以的
$options.appendTo('#select2');
});
$('#select2').dblclick(function(){
$('#select2 option:selected').appendTo('#select1');
});
});
</script>
</head>
<body>
<div class="centent">
<select multiple id="select1" style="width:100px;height:250px;">
<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>
<select multiple id="select2" style="width:100px;height:250px;">
</select>
</div>
<div>
<span id="add">选中添加到右边>></span>
<span id="remove"><<选中添加到左边</span><br>
<span id="addAll">全部添加到右边>></span>
<span id="removeAll"><<全部添加到左边</span>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jquery多选select</title>
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#add').click(function(){
var $options = $('#select1 option:selected');//获取当前选中的项
var $remove = $options.remove();//删除下拉列表中选中的项
$remove.appendTo('#select2');//追加给对方
});
$('#remove').click(function(){
var $removeOptions = $('#select2 option:selected');
$removeOptions.appendTo('#select1');//删除和追加可以用appendTo()直接完成
});
$('#addAll').click(function(){
var $options = $('#select1 option');
$options.appendTo('#select2');
});
$('#removeAll').click(function(){
var $options = $('#select2 option');
$options.appendTo('#select1');
});
//双击事件
$('#select1').dblclick(function(){
//var $options = $('#select1 option:selected');
var $options = $('option:selected', this);//注意此处“option”与“:”之间的空格，有空格是不可以的
$options.appendTo('#select2');
});
$('#select2').dblclick(function(){
$('#select2 option:selected').appendTo('#select1');
});
});
</script>
</head>
<body>
<div class="centent">
<select multiple id="select1" style="width:100px;height:250px;">
<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>
<select multiple id="select2" style="width:100px;height:250px;">
</select>
</div>
<div>
<span id="add">选中添加到右边>></span>
<span id="remove"><<选中添加到左边</span><br>
<span id="addAll">全部添加到右边>></span>
<span id="removeAll"><<全部添加到左边</span>
</div>
</body>
</html>