0

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

4

1 回答 1

0

编辑：

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

在此处输入图像描述

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

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

在此处输入图像描述

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

于 2021-02-27T10:06:07.937 回答