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

How to disable a option in a dropdown with radio button, all in the same dropdown. with Javascript

本文关键字:下拉列表 所有这些 Javascript 使用 同一个 单选按钮 何使用 选项      更新时间:2023-09-26

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

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

例如

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

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

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

任何帮助将不胜感激。

您可以将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