在 select 中单击时禁用选项

Question

如何在单击 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>

Answer 1

就用纯的HTML

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

如果您不希望它也显示在下拉列表中，您还可以添加隐藏属性（目前它是可见的但被禁用）

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

Answer 2

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

<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>

在 select 中单击时禁用选项

Disable option when clicked in select

javascript

onclick

drop-down-menu