JS商品分类选择器-优快云博客

本文介绍了一个使用JavaScript实现的商品分类选择器，通过双击或点击按钮可以将已有的商品选项从左侧列表移动到右侧未选商品列表。此选择器适用于商品分类管理场景，如手机数码类别下的商品管理。

JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function selectOne() {
            var leftSelect=document.getElementById("leftSelect");
            var options=leftSelect.options;
            var rightSelect=document.getElementById("rightSelect");
            for(var i=0;i<options.length;i++){
                var option1=options[i];
                if(option1.selected){
                    rightSelect.appendChild(option1)
                }
            }
        }
        function selectOne1() {
            var rightSelect=document.getElementById("rightSelect");
            var options=rightSelect.options;
            var leftSelect=document.getElementById("leftSelect");
            for(var i=0;i<options.length;i++){
                var option1=options[i];
                if(option1.selected){
                    leftSelect.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>
    <tr>
        <td>分类商品</td>
        <td>
            <div style="float: left">
                已有商品<br/>
                <select multiple="multiple" id="leftSelect" andblclick="selectOne()">
                    <option>华为</option>
                    <option>小米</option>
                    <option>诺基亚</option>
                </select>
                <br/>
                <a href="#" onclick="selectOne()">&gt;&gt;</a><br/>
                <a href="#" onclick="selectAll1()">&gt;&gt;&gt;</a>
            </div>
            <div style="float: right;">
                未选商品<br/>
                <select multiple="multiple" id="rightSelect" ondblclick="selectOne1()">
                    <option>苹果</option>
                    <option>三星</option>
                    <option>oppo</option>
                </select>
                <br/>
                <a href="#" onclick="selectOne1()">&lt;&lt;</a><br/>
                <a href="#" onclick="selectAll1()">&lt;&lt;&lt;</a>
            </div>
        </td>
    </tr>
</table>

</body>
</html>

Title