在select中单击时禁用选项

Disable option when clicked in select

本文关键字：选项 单击 select      更新时间：2023-09-26

单击select时，如何禁用选项？这是我的代码，它不起作用。控制台中没有错误。

这是：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
        window.onload = function () {
            var numSelect = document.getElementsByClassName("numSelector");
            for (var i = 0; i < numSelect.length; i++) {
                numSelect[i].innerHTML="<span class='firstSelector'><option>Select Number</option></span><option>1/2</option>";
                numSelect[i].onclick = disableSelect;
            }
        }
        function disableSelect() {
            for (var a = 0; a < document.getElementsByClassName("firstSelector").length; a++) {
                document.getElementsByClassName("firstSelector")[i].innerHTML="<optgroup>Select Number</optgroup>";
            }
        }
        </script>
    </head>
    <body>
        <select class="numSelector"></select>
        <select class="numSelector"></select>
    </body>
</html>

我不确定您想要什么，但以下是禁用下拉值的方法。

<select id="select1" onclick="disableSelectedItem(this);">
    <option>Select Number</option>
    <option>1</option>
    <option>2</option>
</select>
<select id="select2" onclick="disableFirstItemOnly(this);">
    <option>Select Number</option>
    <option>1</option>
    <option>2</option>
</select>
<script type="text/javascript">
    function disableSelectedItem(ddl) {
        var value = ddl.options[ddl.selectedIndex].value;
        var count = ddl.length;
        for (var i = 0; i < count; i++) {
            if (ddl.options[i].value == value) 
                ddl.options[i].disabled = true;
            else 
                ddl.options[i].disabled = false;
       }
     }
     function disableFirstItemOnly(ddl) {
         ddl.options[0].disabled = true;
     }
</script>

只需使用纯HTML

<select required>
    <option value="" selected disabled>Select Number</option>
    <option>1</option>
    <option>etc..</option>
</select>

如果你不想让隐藏属性也显示在下拉列表中，你也可以添加它（目前它是可见的，但已禁用）

<select>上的必需属性意味着不选择数字将阻止提交（尽管您仍应验证服务器端）

相关文章：