为什么我的选择选项没有被禁用？

如何解决为什么我的选择选项没有被禁用？

我有一个 html 页面，其中包含两个选择框。两个框都包含相同的选项。每次在一个框中选择一个选项，应在第二个框中禁用它。

我的 html 文件中的第一个选择框：

<div class="select_Box">
    <select id="unallowedInput" onchange="disableOption()" class="select2 col-lg-12" multiple title="Auswählen" data-max-options="3" data-max-options-text="Es dürfen nur drei Elemente ausgewählt werden!"></select>       
</div>

现在我的 js 文件包含从 api 获取选项值的方法和禁用选项的方法：

function addToSelect(){
    $(document).ready(function(){
        $('.select2').selectpicker({
            liveSearch: true
         });
    })

    var input1 = document.getElementById('unallowedInput');                             

    var geturlW = 'myurl';
    var wirk = req('GET',geturlW);
    var length = Object.keys(wirk).length;                                  
    for(i = 0; i < length; i++){
        var opt1 = document.createElement('option');
                            
        opt1.innerHTML = wirk[i].name;
        opt1.value = wirk[i].name;
        opt1.id = wirk[i].id;
        eingabe1.appendChild(opt1); 
    }
}

function disableOption(){
    document.getElementById("elem1").disabled = true;
    console.log(document.getElementById("elem1"));
}

我试图通过禁用第一个框 onchange 中的第一个元素来开始简单：

document.getElementById("elem1").disabled = true;

它成功地改变了我的选项：

<option value="Option1" id="elem1">Option1</option>

到：

<option value="Option1" id="elem1" disabled="">Option1</option>

问题是，该元素仍处于启用状态。当我使用时也是如此：

document.getElementById("elem1").setAttribute("disabled","disabled");

由于我仍然是初学者并且还不是很熟悉 JQuery，如果答案只包含普通的 JS，我将不胜感激 :)

解决方法

编辑：

我尝试模拟 select 的填充，老实说，onchange 处的一切似乎都正常工作。它可能取决于浏览器或其他 JavaScript 冲突（例如 jQuery）或函数中的变量 eingabe1 不是 input1 ...

使用您的代码可以正常工作（见下图，elem2 示例）：

document.getElementById("elem2").setAttribute("disabled","disabled");

所以我猜问题出在上游，即您运行该代码的那一刻。您之前可能遇到过错误，或者它没有执行。