javascript - 如何使用单选按钮禁用下拉列表中的选项，所有这些都在同一个下拉列表中。使用 JavaScript

Question

我有一个页面，其中包含多个下拉列表和单选按钮选项，并加载了 js 。

如何在同一选择下拉列表中禁用带有单选按钮的选项。

例如

单选按钮 1 将显示数量选项值 1、值 2 和值 3 单选按钮 2 将显示数量值 4、值 5 和值 6

因此我不必创建不同的数量下拉列表，我可以使用一个数量下拉列表，并使用两个单选按钮控制客户看到的选项。

我能想到的是，它应该通过选项值，当您单击单选一时，它应该禁用并隐藏值编号 xx。

非常感谢任何帮助。

Answer 1

您只需将 display:none; 或隐藏类添加到选择框中的选项即可。对于您的情况，您可以使用 javascript 来完成此操作。

<select id="mySelect">
    <option>1</option>
    <option>2</option>
    <option style="display:none;">3</option>
    <option>4</option>
</select>

本例中不会显示选项 3。

或者，您也可以在 JavaScript 中重建选择框的内容。

function displayOptions (block) {
    var mySelect = document.getElementById('mySelect');

    if (block === 1) {
        mySelect.innerHTML = '<option>1</option><option>2</option>';
    } else { 
        mySelect.innerHTML = '<option>3</option><option>4</option>';
    }

    //TODO you can select a new default here or it will default to the first option
}

//TODO bind a change event to your radio buttons and invoke the displayOptions function