JQ写下拉列表项目移动（内附效果图和源代码）
效果图如下：
实现功能：点击第一个按钮，让选中的对象从左边移动到右边；
点击第二个按钮，让左边的所有对象移动到右边；
点击第三个按钮，让选中的对象从右边边移动到左边；
点击第四个按钮，让右边的所有对象移动到左边。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
select{width:130px; height:220px;}
</style>
<script>
//$(selector).append(content) ：将content追加到selector选择器内部的最后面
// $(content).appendTo(selector)：将content追加到selector选择器内部的最后面
$(function () { //当页面加载完成时；
$("option").dblclick(function() {
$(this).appendTo($(this).parent().siblings('select'));
});
$("input").eq(0).click( function () { //按下第一个按钮，触发函数
$("#hebei>option:selected").appendTo($("#henan")); //把选中的option移动到henan的下拉列表中
});
$("input").eq(1).click( function () { //按下第二个按钮，触发函数
$("#hebei>option").appendTo($("#henan")); //把hebei的option全部移动到henan的下拉列表中
});
$("input").eq(2).click( function () { //按下第三个按钮，触发函数
$("#henan>option:selected").appendTo($("#hebei")); //把选中的option移动到hebei的下拉列表中
});
$("input").eq(3).click( function () { //按下第四个按钮，触发函数
$("#henan>option").appendTo($("#hebei")); //把henan的option全部移动到hebei的下拉列表中
});
});
</script>
</head>
<body>
<select id="hebei" multiple="multiple">
<option>石家庄</option>
<option>保定</option>
<option>邯郸</option>
<option>邢台</option>
<option>衡水</option>
</select>
<select id="henan" multiple="multiple">
<option>郑州</option>
<option>开封</option>
<option>洛阳</option>
<option>周口</option>
<option>信阳</option>
</select><br /><br />
<input type="button" value="-->">
<input type="button" value="==>" >
<input type="button" value="<--" >
<input type="button" value="<==" >
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
select{width:130px; height:220px;}
</style>
<script>
//$(selector).append(content) ：将content追加到selector选择器内部的最后面
// $(content).appendTo(selector)：将content追加到selector选择器内部的最后面
$(function () { //当页面加载完成时；
$("input").eq(0).click( function () { //按下第一个按钮，触发函数
var n = $("#hebei")[0].selectedIndex; //获取被选中的option的下标n
$("#hebei>option").eq(n).appendTo($("#henan")); //把下标为n的option移动到henan的下拉列表中
});
$("input").eq(1).click( function () { //按下第二个按钮，触发函数
$("#hebei>option").appendTo($("#henan")); //把hebei的option全部移动到henan的下拉列表中
});
$("input").eq(2).click( function () { //按下第三个按钮，触发函数
var n = $("#henan")[0].selectedIndex; //获取被选中的option的下标n
$("#henan>option").eq(n).appendTo($("#hebei")); //把下标为n的option移动到hebei的下拉列表中
});
$("input").eq(3).click( function () { //按下第四个按钮，触发函数
$("#henan>option").appendTo($("#hebei")); //把henan的option全部移动到hebei的下拉列表中
});
});
</script>
</head>
<body>
<select id="hebei" multiple="multiple">
<option>石家庄</option>
<option>保定</option>
<option>邯郸</option>
<option>邢台</option>
<option>衡水</option>
</select>
<select id="henan" multiple="multiple">
<option>郑州</option>
<option>开封</option>
<option>洛阳</option>
<option>周口</option>
<option>信阳</option>
</select><br /><br />
<input type="button" value="-->">
<input type="button" value="==>" >
<input type="button" value="<--" >
<input type="button" value="<==" >
</body>
</html>
浙公网安备 33010602011771号