Question

我有一个任务，我必须为单选按钮中的每个选项显示单独的下拉列表。当我选择一个单选按钮（不选择单选按钮，然后单击＆＃39;提交＆＃39;。只需选择（单击）一个单选按钮），相应的下拉列表应显示在旁边。

Answer 1

您想要收听on'change'事件，这是jquery的一个例子：

 $('select').hide();

 $('input').on('change', function(){
      $('select').show();
 })

我已将一个工作示例放入jsbin：https://jsbin.com/xohecizina/edit?html,js,output

Answer 2

我为你做了一个例子here。

该示例基本上是以下步骤：

标记您的HTML

<label>Radio 1</label>
<input type="radio" name="group" value="1" checked />
<label>Radio 2</label>
<input type="radio" name="group" value="2" />
<label>Radio 3</label>
<input type="radio" name="group" value="3" />

<div>
  <select id="drop1">
    <option>DropDown 1</option>
  </select>
  <select id="drop2" class="no-display">
    <option>DropDown 2</option>
  </select>
  <select id="drop3" class="no-display">
    <option>DropDown 3</option>
  </select>
</div>

添加CSS
```
.no-display {display: none;}
```

将事件侦听器添加到调用下拉选择功能的单选按钮

var radio_buttons = document.getElementsByName("group");

for (var i = 0; i < radio_buttons.length; i++) {
    radio_buttons[i].addEventListener("change", setDropDown);
}

function setDropDown() {
    setDropDownsForNoDisplay();
    if (this.checked) {
        setDropDownForDisplay(this.value);        
    }
}

添加下拉选择功能使用的辅助函数

var dropdowns = document.getElementsByTagName("select");
function setDropDownsForNoDisplay() {
    for (var i = 0; i < dropdowns.length; i++) {
        dropdowns[i].classList.add("no-display");
    }
}

function setDropDownForDisplay(x) {
    if (x === "1") {
        document.getElementById("drop1").classList.remove("no-display");
    } else if (x === "2") {
        document.getElementById("drop2").classList.remove("no-display");
    } else if (x === "3") {
        document.getElementById("drop3").classList.remove("no-display");
    }
}

你也可以直接在单选按钮标记中使用事件（“onclick”，“onchange”），而不是添加事件监听器，但我更喜欢将事件与标记分开。

如何在单击单选按钮时显示下拉列表？

2 个答案: