从选择选项中隐藏 Div 时

Hide Div when option from select chosen

本文关键字：Div 隐藏 选择 选项      更新时间：2023-09-26

我有一个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="answerswers">  
    Correct Answer:<input type="text" name="answerswer"><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 为"answerswers"的div 被隐藏，如果选择了其他选项，则应显示此div。

我相信这可以是java的圆顶

在选择时侦听change事件，取值.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="answerswers">
  Correct Answer:
  <input type="text" name="answerswer">
  <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";
  }
});

试试这个

$(function(){
  $("#Type").change(function(){
    if($("#Type").val() == "click"){
      $("#answers").css("display", "none");
    }
    else{
      $("#answers").css("display", "block");
    }
  });
});
相关文章：