JS练习：商品的左右选择

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品的左右选择</title>
    <!--
        步骤分析
            1. 确定事件: 点击事件 :onclick事件
            2. 事件要触发函数 selectOne
            3. selectOne要做一些操作
                (将左边选中的元素移动到右边的select中)
                1. 获取左边Select中被选中的元素
                2. 将选中的元素添加到右边的Select中即可
    -->
    <script>
        function selectOne() {
            //1. 获取左边Select中被选中的元素
            var leftSelect = document.getElementById("leftSelect");
            var options = leftSelect.options;

            //找到右侧的Select
            var rightSelect = document.getElementById("rightSelect");
            //遍历找出被选中的option
            for (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;

            //找到右侧的Select
            var rightSelect = document.getElementById("rightSelect");
            //遍历找出被选中的option
            for (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>