如何使用单选按钮禁用下拉列表中的选项,所有这些都在同一下拉列表中。用Javascript

时间:2014-11-26 00:13:08

标签: javascript jquery button triggers radio

我有一个页面,其中包含多个下拉菜单和用js加载的单选按钮选项。

如何在相同的选择下拉菜单中禁用带有单选按钮的选项。

例如

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

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

我能想到的是,它应该通过选项值,当你点击一号收音机时,它应该禁用并隐藏值xx。

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

您只需在选择框中的选项中添加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