單擊單選按鈕時如何顯示下拉列表？

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”），而不是添加事件偵聽器，但是我更喜歡將事件與標記分開。