在select中单击时禁用选项

How do I make disable an option when a select is clicked? Here is my code, which does not work. There are no errors in the console.

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

Here it is:

这里是:

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

2 个解决方案

#1

I'm not sure what you want but here is the ways to disabled dropdown value.

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

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

#2

Just use pure HTML

只需使用纯HTML

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

You could also add the hidden attribute if you don't want it to show up in the dropdown too (at the moment it is visible but disabled)

如果您不希望它也显示在下拉列表中(此时它可见但已禁用),您也可以添加隐藏属性

The required attribute on the <select> means that not choosing a number will prevent submission (though you should still validate serverside)

#1