当选择html选项select时如何使用jQuery隐藏/显示div id

Question

我有一个html选项select和两个选项：

<select name="subject" id="subject">
   <option value="option1">Option 1</option>
   <option value="option2">Option 2</option>
</select>

我还有一个带有id=“人类基因组”的div元素。

<div id="human-genome"></div>

默认情况下，我希望隐藏此id，并在选择选项1时进行隐藏。当选项2被选中时，我想显示这个id。

以下是我的Jquery：

   $(document).ready(function(){
  $("#subject").change(function(){
      if($(this.val() == 'option1'){
          $('#human-genome').hide();
      } else {
          $('#human-genome').show();
      });
   
});

由于某种原因，代码不起作用。有什么建议吗？提前谢谢你！

Answer 1

在您开发的代码中有一个语法错误。我对代码进行了如下编辑，以使其易于理解。

​

​

​

$(document).ready(function(){
  $("#subject").change(function(){
    console.log(this.value);
    
    if(this.value == 'option1')
    {
      $('#human-genome').hide();
    }
    else
    {
      $('#human-genome').show();
    }
  });
});

#human-genome{
  margin-left: 100px;
  background-color: red;
  width: 100px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select name="subject" id="subject">
   <option value="option1">Hide</option>
   <option value="option2">Show</option>
</select>

<div id="human-genome">TEST</div>

​

Answer 2

​

我刚注意到一个语法错误。

Answer 3

请使用$(this).val()代替您的代码。

$(document).ready(function(){
    $("#subject").change(function(){
    if($(this).val() == 'option1'){
      $('#human-genome').hide();
    } else {
      $('#human-genome').show();
    }});});