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>

所以我需要的是当值为＆＃34的选项时;点击＆＃34;选择带有id＆＃34;答案＆＃34;的div隐藏，如果选择其他选项，则应显示此div。

我相信这可以用javas圆顶

Answer 1

在选择时收听change事件，获取值.val()并检查它是否为"click"。如果是，请show() #answers，否则hide()。

＆＃13;

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

＆＃13;

#answers {
  display: none;
}

＆＃13;

<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>

＆＃13;

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

Answer 2

试试这个

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

选择时选择隐藏Div选项

2 个答案: