html如何實現(xiàn)左右菜單左右互換

發(fā)布時間：2021-10-19 09:40:27 來源：億速云閱讀：169 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)html如何實現(xiàn)左右菜單左右互換，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

<meta charset="UTF-8">
        <title></title>
        <!--
            步驟分析
                1. 確定事件: 點擊事件 :onclick事件
                2. 事件要觸發(fā)函數(shù) selectOne
                3. selectOne要做一些操作
                    (將左邊選中的元素移動到右邊的select中)
                    1. 獲取左邊Select中被選中的元素
                    2. 將選中的元素添加到右邊的Select中就可以
        -->
        <script>

            function selectOne(){
//              1. 獲取左邊Select中被選中的元素
                var leftSelect = document.getElementById("leftSelect");
                var options = leftSelect.options;

                //找到右側(cè)的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;

                //找到右側(cè)的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="手機(jī)數(shù)碼"/></td>
            </tr>
            <tr>
                <td>分類描述</td>
                <td><input type="text" value="這里面都是手機(jī)數(shù)碼"/></td>
            </tr>
            <tr>
                <td>分類商品</td>
                <td>
                    <!--左邊-->
                    <div >
                        已有商品<br />
                        <select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
                            <option>華為</option>
                            <option>小米</option>
                            <option>錘子</option>
                            <option>oppo</option>
                        </select>
                        <br />
                        <a href="#" onclick="selectOne()"> &gt;&gt; </a> <br />
                        <a href="#" onclick="selectAll()"> &gt;&gt;&gt; </a>
                    </div>
                    <!--右邊-->
                    <div > 
                        未有商品<br />
                        <select multiple="multiple" id="rightSelect">
                            <option>蘋果6</option>
                            <option>泰康手機(jī)</option>
                            <option>諾基亞</option>
                            <option>三星</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>

關(guān)于“html如何實現(xiàn)左右菜單左右互換”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

html如何實現(xiàn)左右菜單左右互換

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽