<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>从左到右、从右到左</title>
<style type="text/css">
select { width: 100px; height: 300px; } div { width: 130px; float: left; text-align: center; } </style> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> //Select and add to the right $(function(){ //The page is loaded and starts to execute <script type="text/javascript">
$("button:eq(0)").click(function(){ //The selected element in the element name=sel01 in the select tag executes the loop function $("select[name=sel01] :selected"). each(function(){ //alert(this); //appendTo() For example: a.appendTo(b) means to insert a at the end of the sub-element b and become the last sub-element $(this).appendTo("select [name=sel02]"); }); }); //Add all to the right $("button:eq(1)").click(function(){ //Select all in name=sel01 in the select tag option element, execute the loop function $("select[name=sel01] option").each(function(){ //alert(this);
$(this).appendTo("select[name=sel02]");
});
});
//Select and delete to the left
$("button:eq(2)").click(function(){ $(" select[name=sel02] :selected").each(function(){ //alert(this); $(this).appendTo("select[name=sel01]"); }); }); //all Delete to the left $("button:eq(3)").click(function(){ $("select[name=sel02] option").each(function(){ //alert(this); $(this ).appendTo("select[name=sel01]"); });
});
});
</script>
</head>
<body>
<div id="left">
<select multiple="multiple" name="sel01">
<option value="opt00">选项00</option>
<option value="opt01">选项01</option>
<option value="opt02">选项02</option>
<option value="opt03">选项03</option>
<option value="opt04">选项04</option>
<option value="opt05">选项05</option>
<option value="opt06">选项06</option>
<option value="opt07">option 07</option> <option value="opt08">option 10</option>
<option value="opt08">option 08</option>
<option value="opt08">option 11</option>
<option value="opt08">option 12</option>
<option value="opt08">option 13</option>
<option value="opt08"> Option 14</option>
<option value="opt08">Option 15</option>
<option value="opt08">Option 16</option>
</select>
<br/>
<br/>
<button>Select Add to the right</button>
<button>Add all to the right</button>
</div>
<div id="right">
<select multiple="multiple"name="sel02">
</select>
<br/>
<br/>
<button>Select and delete to the left</button>
<button>Delete all to the left</button>
</div>
</body>
</html>
Browser display effect:
