时间戳

首页 > 解决方案 > 如何在下拉列表中实现条件语句？

javascript - 如何在下拉列表中实现条件语句？

问题描述

我有一个下拉菜单，喜欢调整我的选择。如果用户单击复选框，则会出现复选框的 div，否则单击单选按钮就会出现。

https://jsfiddle.net/bhvds925/2/

function selectorchecker() {

  if (selectorchecker == "checkbox") {
    var hiddenDiv = document.getElementById("chkbox_choice");
    hiddenDiv.style.display = (this.value == "") ? "none" : "block";
  } else {
    var hiddenDiv = document.getElementById("rdbtn_choice");
    hiddenDiv.style.display = (this.value == "") ? "none" : "block";

  }

}
<div class="container">
  Question:
  <br>

  <textarea rows="5" cols="50" name="description" placeholder="Enter a question">
         </textarea>
  <br>

  <select name="choice" id="choice" onchange="selectorchecker()">
    <option value="">Select choices</option>
    <option value="checkbox">Checkbox</option>
    <option value="radiobtn">Radio Button</option>
  </select>
</div>

<button id="addQues">Add Question</button>

<div style="display:none;" id="chkbox_choice">
  <table id="dataTable" width="350px">
    <tr>
      <td><input type="checkbox" name="check" /></td>
      <td>
        <INPUT type="text" /> </td>
    </tr>
  </table>

  <input type="button" value="Add choices" onclick="addRow('dataTable')" />

  <input type="button" value="Delete choices" onclick="deleteRow('dataTable')" />
</div>


<div style="display:none;" id="rdbtn_choice">
  <table id="dataTable" width="350px">
    <tr>
      <td><input type="radio" name="radio" /></td>
      <td>
        <INPUT type="text" /> </td>
    </tr>
  </table>

  <input type="button" value="Add choices" onclick="addRow('dataTable')" />

  <input type="button" value="Delete choices" onclick="deleteRow('dataTable')" />
</div>

标签： javascriptjqueryhtml

解决方案

你是这个意思？

function selectorchecker(sel) {
  document.getElementById("chkbox_choice").style.display = "none";
  document.getElementById("rdbtn_choice").style.display = "none";
  if (sel.value) {
    var show = sel.value=="checkbox"?"chkbox_choice":"rdbtn_choice";
    document.getElementById(show).style.display = "block";
  }
}
<div class="container">
  Question:
  <br>

  <textarea rows="5" cols="50" name="description" placeholder="Enter a question">
         </textarea>
  <br>

  <select name="choice" id="choice" onchange="selectorchecker(this)">
    <option value="">Select choices</option>
    <option value="checkbox">Checkbox</option>
    <option value="radiobtn">Radio Button</option>
  </select>
</div>

<button id="addQues">Add Question</button>

<div style="display:none;" id="chkbox_choice">
  <table id="dataTable" width="350px">
    <tr>
      <td><input type="checkbox" name="check" /></td>
      <td>
        <INPUT type="text" /> </td>
    </tr>
  </table>

  <input type="button" value="Add choices" onclick="addRow('dataTable')" />

  <input type="button" value="Delete choices" onclick="deleteRow('dataTable')" />
</div>


<div style="display:none;" id="rdbtn_choice">
  <table id="dataTable" width="350px">
    <tr>
      <td><input type="radio" name="radio" /></td>
      <td>
        <INPUT type="text" /> </td>
    </tr>
  </table>

  <input type="button" value="Add choices" onclick="addRow('dataTable')" />

  <input type="button" value="Delete choices" onclick="deleteRow('dataTable')" />
</div>

推荐阅读