jQuery应用实例4：下拉列表
程序员文章站
2022-06-22 12:39:44
应用场景：左侧是已有商品，右侧是未有商品，选择其中的内容点击箭头即可互换： 点击大箭头则全部内容去另一边，或者双击已有商品的选项也会加入右边： 代码实现： ......
应用场景：左侧是已有商品，右侧是未有商品，选择其中的内容点击箭头即可互换：
点击大箭头则全部内容去另一边，或者双击已有商品的选项也会加入右边：
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉列表左右选择</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function() {
/*1.选中单击去右边*/
$("#selectOneToRight").click(function() {
$("#left option:selected").appendTo($("#right"));
});
/*2.单击全部去右边*/
$("#selectAllToRight").click(function() {
$("#left option").appendTo($("#right"));
});
/*3.选中双击去右边*/
$("#left option").dblclick(function() {
$("#left option:selected").appendTo($("#right"));
});
$("#selectOneToLeft").click(function() {
$("#right option:selected").appendTo($("#left"));
});
$("#selectAllToLeft").click(function() {
$("#right option").appendTo($("#left"));
});
$("#right option").dblclick(function() {
$("#right option:selected").appendTo($("#left"));
});
});
</script>
</head>
<body>
<table border="1" width="600" align="center">
<tr>
<td>
分类名称
</td>
<td>
<input type="text" name="cname" value="手机数码" />
</td>
</tr>
<tr>
<td>
分类描述
</td>
<td>
<textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea>
</td>
</tr>
<tr>
<td>
分类商品
</td>
<td>
<span style="float: left;">
<font color="green" face="宋体">已有商品</font><br/>
<select multiple="multiple" style="width: 100px;height: 200px;" id="left">
<option>IPhone6s</option>
<option>小米4</option>
<option>锤子T2</option>
</select>
<p><a href="#" style="padding-left: 20px;" id="selectOneToRight">>></a></p>
<p><a href="#" style="padding-left: 20px;" id="selectAllToRight">>>></a></p>
</span>
<span style="float: right;">
<font color="red" face="宋体">未有商品</font><br/>
<select multiple="multiple" style="width: 100px;height: 200px;" id="right">
<option>三星Note3</option>
<option>华为6s</option>
</select>
<p><a href="#" id="selectOneToLeft"><<</a></p>
<p><a href="#" id="selectAllToLeft"><<<</a></p>
</span>
</td>
</tr>
<tr>
<td colspan="2">
<input type='submit' value="修改" />
</td>
</tr>
</table>
</body>
</html>