选择标签的 onclick 替代方法答案

【问题标题】：Alternative to onclick for select tag选择标签的 onclick 替代方法
【发布时间】：2022-01-09 03:53:38
【问题描述】：

我有一个 Javascript function，它根据已选择的一些 radio 按钮更改下拉菜单的选项。我最初将radio 按钮设置为onclick 以运行function，但由于它基于2 组不同的radio 按钮，所以这不起作用。我将onclick 更改为在用户选择下拉菜单时发生，但是现在您不能将select 变为实际的option，因为它只是在进行选择时重置下拉菜单。有没有我可以使用的替代方法？

Genotype <select name="dropdown" id="dropdown" onclick = "DROPDOWN(father);"></select>

【问题讨论】：

标签： javascript html select dropdown

【解决方案1】：

您需要跟踪onchange 而不是onclick，因此即使它们周围有一些label 元素，更改它们，您的代码也会正常工作。至于解决方案，您将需要实现一个逻辑，以确定在您的radio 按钮的任何可能组合上生成的选项。下面的代码是一个概念验证。

function refreshOptions() {
    let innerHTML = "<option>Please select</option>";
    for (let item of document.querySelectorAll("input[type=radio]")) {
        if (item.checked) innerHTML += `<option value="${item.value}">${item.value}</option>`
    }
    document.getElementById("myselect").innerHTML = innerHTML;
}

<select id="myselect">
    <option>Please select</option>
    <option value="foo1">foo1</option>
    <option value="bar1">bar1</option>
</select>
<label>foo1 <input onchange="refreshOptions()" type="radio" name="foo" value="foo1" checked></label>
<label>foo2 <input onchange="refreshOptions()" type="radio" name="foo" value="foo2"></label>
<label>bar1 <input onchange="refreshOptions()" type="radio" name="bar" value="bar1" checked></label>
<label>bar2 <input onchange="refreshOptions()" type="radio" name="bar" value="bar2"></label>

【讨论】：