选择时选择隐藏Div选项

Question

我有一个div,我需要隐藏在选项中选择一个选项,下面是我当前的HTML:

Type:<select name="Type" id="Type">
        <option value="choice">Multiple choice</option>
        <option value="image">Image/Video</option>
        <option value="click">Click Image</option>
     </select><br>
<div id="answers">  
    Correct Answer:<input type="text" name="answer"><br>        
    Wrong Answer 1:<input type="text" name="wrong1"><br>
    Wrong Answer 2:<input type="text" name="wrong2"><br>
    Wrong Answer 3:<input type="text" name="wrong3"><br>
</div>

所以我需要的是当选择值为"click"的选项时,隐藏id为"answers"的div,如果选择了其他选项,则应显示此div.

我相信这可以用javas圆顶

Answer 1

change在select上收听事件,取值.val()并检查是否存在"click".如果是这样,show()对#answers,否则hide()他们.

var $answers = $("#answers");
$("#Type").on("change", function() {
  if ($(this).val() === "click") {
    $answers.show();
  } else {
    $answers.hide();
  }
});

#answers {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Type:
<select name="Type" id="Type">
  <option value="choice">Multiple choice</option>
  <option value="image">Image/Video</option>
  <option value="click">Click Image</option>
</select>
<br>
<div id="answers">
  Correct Answer:
  <input type="text" name="answer">
  <br>Wrong Answer 1:
  <input type="text" name="wrong1">
  <br>Wrong Answer 2:
  <input type="text" name="wrong2">
  <br>Wrong Answer 3:
  <input type="text" name="wrong3">
  <br>
</div>

no-jQuery版本将是:

var answersElm = document.querySelector("#answers");
document.querySelector("#Type").addEventListener("change", function() {
  if (this.value === "click") {
    answersElm.style.display = "block";
  } else {
    answersElm.style.display = "none";
  }
});