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

Question

我有一个 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，我将不胜感激：)

Answer 1

编辑：

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

---

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

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

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