<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="../../js库/jquery-2.1.0.js"></script>
<script>
//左边
$(function(){
$("#a1").click(function(){
$("#right").append($("#left option:selected"));
});
});
$(function(){
$("#a2").click(function(){
$("#right").append($("#left option"));
});
});
//右边
$(function(){
$("#a3").click(function(){
$("#left").append($("#right option:selected"));
});
});
$(function(){
$("#a4").click(function(){
$("#left").append($("#right option"));
});
});
</script>
<table border="1px" width="400px" height="400px">
<tr>
<td>分类名称</td>
<td>手机数码</td>
</tr>
<tr>
<td>描述</td>
<td>手机电子数码设备</td>
</tr>
<tr>
<td>分类产品</td>
<td>
<!-- 左边 -->
<div style="float:left">
<select multiple="multiple" id="left">
<!--multiple="multiple"显示多行-->
<!-- ondblclick双击两下后的事件-->
<option>华为</option>
<option>小米</option>
<option>康宁</option>
<option>索尼</option>
<option>oppo</option>
<option>vivo</option>
</select>
<br />
<a href="#" id="a1">单个加入</a>
<br />
<a href="#" id="a2">全部加入</a>
</div>
<!-- 右边-->
<div style="float:right">
<select multiple="multiple" id="right"><!--显示多行-->
<option>苹果</option>
<option>锤子</option>
<option>360</option>
<option>漫步者</option>
<option>魅族</option>
<option>三星</option>
</select>
<br />
<a href="#" id="a3">单个取消</a>
<br />
<a href="#" id="a4">全部取消</a>
</div>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交">
</td><!--合并3列-->
</tr>
</table>
</body>
</html>
7 商品的左右选择
最新推荐文章于 2024-04-18 12:11:54 发布
扫一扫
2659
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
