JS练习：商品的左右选择

代码：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>商品的左右选择</title><!--步骤分析1. 确定事件: 点击事件 :onclick事件2. 事件要触发函数 selectOne3. selectOne要做一些操作(将左边选中的元素移动到右边的select中)1. 获取左边Select中被选中的元素2. 将选中的元素添加到右边的Select中即可--><script>function selectOne() {//1. 获取左边Select中被选中的元素var leftSelect = document.getElementById("leftSelect");var options = leftSelect.options;//找到右侧的Selectvar rightSelect = document.getElementById("rightSelect");//遍历找出被选中的optionfor (var i = 0; i < options.length; i++) {var option1 = options[i];if (option1.selected) {//2. 将选中的元素添加到右边的Select中即可
                    rightSelect.appendChild(option1);}}}//将左边所有的商品移动到右边function selectAll() {//1. 获取左边Select中被选中的元素var leftSelect = document.getElementById("leftSelect");var options = leftSelect.options;//找到右侧的Selectvar rightSelect = document.getElementById("rightSelect");//遍历找出被选中的optionfor (var i = options.length - 1; i >= 0; i--) {var option1 = options[i];rightSelect.appendChild(option1);}}</script>
</head>
<body><table border="1px" width="400px"><tr><td>分类名称</td><td><input type="text" value="手机数码"/></td></tr><tr><td>分类描述</td><td><input type="text" value="手机数码产品"/></td></tr><tr><td>分类商品</td><td><!--左边--><div style="float: left;">已有商品<br/><select multiple="multiple" id="leftSelect" ondblclick="selectOne()"><option>华为</option><option>小米</option><option>vivo</option><option>oppo</option></select><br/><a href="#" onclick="selectOne()"> &gt;&gt; </a> <br/><a href="#" onclick="selectAll()"> &gt;&gt;&gt; </a></div><!--右边--><div style="float: right;">未有商品<br/><select multiple="multiple" id="rightSelect"><option>苹果5</option><option>苹果6</option><option>苹果7</option><option>苹果8</option></select><br/><a href="#"> &lt;&lt; </a> <br/><a href="#"> &lt;&lt;&lt; </a></div></td></tr><tr><td colspan="2"><input type="submit" value="提交"/></td></tr>
</table>
</body>
</html>