html如何实现左右菜单左右互换

发布时间:2021-10-19 09:40:27 作者:小新
来源:亿速云 阅读:169

这篇文章将为大家详细讲解有关html如何实现左右菜单左右互换,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

<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 >
                        已有商品<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>泰康手机</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>

关于“html如何实现左右菜单左右互换”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

推荐阅读:
  1. 微信小程序如何实现菜单左右联动
  2. HTML如何实现移动端手指操控左右滑动的菜单

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html

上一篇:怎么用C#+Selenium+ChromeDriver爬取网页,模拟真实的用户浏览行为

下一篇:Python发送Post请求之如何实现根据参数位置传参、数据类型、不同方式传参

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》