7 商品的左右选择

最新推荐文章于 2021-06-22 21:36:56 发布

P_ning

最新推荐文章于 2021-06-22 21:36:56 发布

阅读量137

点赞数

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/P_ning/article/details/96840708

版权

jQuery 专栏收录该内容

19 篇文章

订阅专栏

<!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>