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>上的必需属性意味着不选择号码会阻止提交（尽管您仍应验证服务器端）

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中单击时禁用选项

2 个答案: