Question

除了一件事，当前的HTML SELECT标签对我来说很有用。是否可以实现切换当前项目。

如果我有当前选择，我想再次点击它并“取消选择”它。它现在不起作用，它只是保持当前选择“选中”。

似乎我需要知道“之前”选择以及“当前”选择并比较2以查看是否需要“取消选择”所有内容。如何获得之前的选择，我所知道的是“selectedIndex”，这是当前的选择。

有办法吗？

Answer 1

要完成此操作，您可以使用一些javascript，如下所示。我已经测试过，它似乎按照您的要求工作。我看起来很冗长可读性，但是一旦你让它为你工作就可以清理。

<script language="JavaScript" type="text/javascript">
    function toggleSelectedValue() {

        var selObj = document.getElementById('myList');
        var selIndex = selObj.selectedIndex;
        var selValue = selObj.options[selIndex].value;
        var prevSelValue = document.getElementById('trackSelectedValueHiddenField').value;

        if (selValue == prevSelValue) {

            //Delect "all" items
            selObj.selectedIndex = -1;
            document.getElementById('trackSelectedValueHiddenField').value = 0;
        }
        else {setSelectedValue();}

    }
    function setSelectedValue() 
    {
        var selObj = document.getElementById('myList');
        var selIndex = selObj.selectedIndex;
        document.getElementById('trackSelectedValueHiddenField').value = selObj.options[selIndex].value;
    }
    </script>

</head>
<body>
<div id="wrapper">
    <div id="contentDiv" style="height:686px; border: solid 1px red;">
    <select multiple="multiple" id="myList" onclick="toggleSelectedValue()">
        <option value="1">Test</option>
        <option value="2">Test</option>
        <option value="3">Test</option>
    </select>
    <input type="hidden" id="trackSelectedValueHiddenField" value="0" />
    </div>
</div>
</body>
</html>

在SELECT TAG上实现选择和取消选择（切换）

1 个答案: