javascript的基础代码（选项）

最新推荐文章于 2023-06-21 08:00:08 发布

weixin_44363242

最新推荐文章于 2023-06-21 08:00:08 发布

阅读量101

点赞数

本文链接：https://blog.csdn.net/weixin_44363242/article/details/101208542

版权

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function selectOne() {
            var leftS=document.getElementById("leftSelect");
            var options=leftS.options;
            var rightS=document.getElementById("rightSelect");
            for(var i=0;i<options.length;i++){
                var option1=options[i];
                if(option1.selected){
                    rightS.appendChild(option1);
                }
            }
        }
        function selectOne1() {
            var leftS=document.getElementById("leftSelect");
            var options=leftS.options;
            var rightS=document.getElementById("rightSelect");
            for(var i=0;i<options.length;i){
                var option1=options[i];
                rightS.appendChild(option1);
            }
        }
        function selectOneR() {
            var rightS=document.getElementById("rightSelect");
            var leftS=document.getElementById("leftSelect");
            var options=rightS.options;
            for(var i=0;i<options.length;i++){
                var option1=options[i];
                if (option1.selected) {
                    leftS.appendChild(option1);
                }
            }
        }
        function selectOneR1() {
            var rightS=document.getElementById("rightSelect");
            var leftS=document.getElementById("leftSelect");
            var options=rightS.options;
            for(var i=0;i<options.length;i){
                var option1=options[i];
                    leftS.appendChild(option1);
            }
        }
    </script>
</head>
<body>
<table width="400px" border="1px">
    <tr>
        <td>分类名称</td>
        <td><input type="text" value="手机数码"></td>
    </tr>
    <tr>
        <td>分类描述</td>
        <td><input type="text" value="这里都是手机数码"></td>
    </tr>e
    <tr>
        <td>分类商品</td>
        <td>
            <div style="float: left">
                已有商品<br>
                <select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
                    <option>华为</option>
                    <option>小米</option>
                    <option>诺基亚</option>
                </select>
                <br/>
                <a href="#" onclick="selectOne()">&gt;&gt;</a><br>
                <a href="#" onclick="selectOne1()">&gt;&gt;&gt;</a>
            </div>
            <div style="float: right">
                未有商品<br>
                <select multiple="multiple" id="rightSelect" ondblclick="selectOneR()">
                    <option>苹果</option>
                    <option>三星</option>
                    <option>oppo</option>
                </select>
                <br/>
                <a href="#" onclick="selectOneR()">&lt;&lt;</a><br>
                <a href="#" onclick="selectOneR1()">&lt;&lt;&lt;</a>
            </div>
        </td>
    </tr>
</table>
</body>
</html>