javascript select控件的使用及左右移动item的逻辑处理

最新推荐文章于 2022-04-07 15:19:53 发布

南郭竽

最新推荐文章于 2022-04-07 15:19:53 发布

阅读量1.6k

点赞数 1

分类专栏：大猫学javascript 文章标签： javascript select 移动

本文链接：https://blog.csdn.net/DucklikeJAVA/article/details/52565730

版权

大猫学javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

html中select控件，应该也就是下拉选项框。不过也可以不是下拉的形式，可以是多行显示的。
这里演示的是，左边一个下拉多选框，右边还有一个下拉多选框。然后，双击左边的下拉多选框的条目，就将其移到右边的下拉多选框中，右边的同理。
还有就是，左边的内容一键移到右边，和右边的一键移到左边的操作。

ps:我感觉javascript最方便的一点就是，可以直接在html或者说浏览器中运行，不需要特别的运行环境，验证起来特别方便。

这里有一个栗子：
假设html是这样的：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

</head>

<body>

    <div
        style="border: 1px dashed #E6E6E6; margin: 150px 0px 0px 450px; width: 350px; height: 200px; background-color: #E6E6E6;">
        <table width="285" height="169" border="0" align="left"
            cellpadding="0" cellspacing="0" style="margin: 15px 0px 0px 15px;">
            <tr>
                <td width="126">
                    <!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度--> <select
                    name="first" multiple="multiple" size=10 class="td3" id="s">
                        <option value="选项1">选项1</option>
                        <option value="选项2">选项2</option>
                        <option value="选项3">选项3</option>
                        <option value="选项4">选项4</option>
                        <option value="选项5">选项5</option>
                        <option value="选项6">选项6</option>
                        <option value="选项7">选项7</option>
                        <option value="选项8">选项8</option>
                </select>
                </td>
                <td width="69" valign="middle"><input name="add" id="add"
                    type="button" class="button" value="-->" /> <input name="add_all"
                    id="add_all" type="button" class="button" value="==>" /> <input
                    name="remove" id="remove" type="button" class="button"
                    value="&lt;--" /> <input name="remove_all" id="remove_all"
                    type="button" class="button" value="&lt;==" /></td>
                <td width="127" align="left"><select name="second" size="10"
                    multiple="multiple" class="td3" id="second">
                        <option value="选项9">选项9</option>
                </select></td>
            </tr>
        </table>
    </div>
</body>
<script type="text/javascript">

</script>
</html>

然后js的代码可以是这样的：

<script type="text/javascript">

    // 左右两边的select
    var leftSelect = document.getElementById("s");
    var leftItems = leftSelect.children;
    var rightSelect = document.getElementById("second");
    var rightItems = rightSelect.children;
    var selectedItems = [];

    // 4个 按钮
    // 01 -> left2right selected
    document.getElementById("add").onclick = function () {
        // todo
        selectedItems.splice(0, selectedItems.length); // 删除自身的全部元素
        for (var i = 0; i < leftItems.length; i++) {
            var item = leftItems[i];
            if (item.selected) {
                selectedItems.push(item);
            }
        }
        for (var j = 0; j < selectedItems.length; j++) {
            rightSelect.appendChild(selectedItems[j]);
//            leftSelect.removeChild(selectedItems[j]); todo ->为什么左边的不需要移除呢？
        }
    };
    // 02 -> left2right all
    document.getElementById("add_all").onclick = function () {
        // todo
        selectedItems.splice(0, selectedItems.length); // 删除自身的全部元素
//        alert(selectedItems.concat(selectedItems,leftItems).length); // todo ->为什么添加之后长度只是1？
        for (var i = 0; i < leftItems.length; i++) {
            var item = leftItems[i];
            selectedItems.push(item);
        }
        for (var j = 0; j < selectedItems.length; j++) {
            rightSelect.appendChild(selectedItems[j]);
        }
    };
    // 03 -> right2left  selected
    document.getElementById("remove").onclick = function () {
        // todo

        selectedItems.splice(0, selectedItems.length); // 删除自身的全部元素
        for (var j = 0; j < rightItems.length; j++) {
            var item = rightItems[j];
            if (item.selected) {
                selectedItems.push(item);
            }
        }

        for (var i = 0; i < selectedItems.length; i++) {
            leftSelect.appendChild(selectedItems[i]);
        }
    };
    // 04 -> right2left  all
    document.getElementById("remove_all").onclick = function () {
        // todo
        selectedItems.splice(0, selectedItems.length); // 删除自身的全部元素
        for (var j = 0; j < rightItems.length; j++) {
            var item = rightItems[j];
            selectedItems.push(item);
        }
        for (var i = 0; i < selectedItems.length; i++) {
            leftSelect.appendChild(selectedItems[i]);
        }
    };

    // 双击事件
    leftSelect.ondblclick = function () {
        // 左边select控件的双击事件
//        alert(leftSelect.selectedIndex);
        rightSelect.appendChild(leftItems[leftSelect.selectedIndex]);
    };

    rightSelect.ondblclick = function () {
        leftSelect.appendChild(rightItems[rightSelect.selectedIndex]);
    };

</script>