<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="jQuery实战_下拉框左右选择_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../../JQuery/jquery.js" type="text/javascript"></script>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
div.centent
{
float: left;
text-align: center;
margin: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
//移到右边
$("#btnAdd").click(function() {
//获取选中的选项，删除并追加给对方
$("#select1 option:selected").appendTo("#select2");
});
//移到左边
$("#btnRemove").click(function() {
$("#select2 option:selected").appendTo("#select1");
});
//全部移到右边
$("#btnAdd_all").click(function() {
//获取全部的选项,删除并追加给对方
$("#select1 option").appendTo("#select2");
});
//全部移到左边
$("#btnRemove_all").click(function() {
$("#select2 option").appendTo("#select1");
});
//双击选项
$("#select1").dblclick(function() { //绑定双击事件
//获取全部的选项,删除并追加给对方
$("option:selected", this).appendTo("#select2"); //追加给对方
});
//双击选项
$("#select2").dblclick(function() {
$("option:selected", this).appendTo("#select1");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="centent">
<select multiple="multiple" id="select1" style="width: 100px; height: 160px;">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
<option value="7">选项7</option>
</select>
<div>
<button id="btnAdd" style="cursor:pointer">选中添加到右边</button><br />
<button id="btnAdd_all" style="cursor:pointer">全部添加到右边</button>
</div>
</div>
<div class="centent">
<select multiple="multiple" id="select2" style="width: 100px; height: 160px;">
<option value="8">选项8</option>
</select>
<div>
<button id="btnRemove" style="cursor:pointer">选中删除到左边</button><br />
<button id="btnRemove_all" style="cursor:pointer">全部删除到左边</button>
</div>
</div>
</form>
</body>
</html>
74
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
