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

Question

我有一个任务，我必须在单选按钮中为每个选项显示单独的下拉列表。 当我选择一个单选按钮（不选择一个单选按钮，然后单击“提交”。仅选择（单击）一个单选按钮）时，相应的下拉列表应显示在侧面。

Answer 1

您想听on'change'事件，这是jquery的示例：

 $('select').hide();

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

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

Answer 2

我在这里为你做了一个例子。

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

1. 标记您的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> 

2. 添加CSS

    .no-display {display: none;} 

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

    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); } } 

4. 添加下拉选择功能使用的辅助功能

    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”），而不是添加事件侦听器，但是我更喜欢将事件与标记分开。