选择select标签中的选项后隐藏div

Question

我在select中有三个选项。我希望当我选择optionB时，应隐藏id demo的div。我怎么能这样做？

$(document).ready(function() {
  $('#selectOption').select(function() {
    var ab = $('#selectOption').val();
    if (ab == 'optionB') {
      $("#demo").hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='selectOption'>
  <option>--select</option>
  <option value='optionA'>optionA</option>
  <option value='optionB'>optionB</option>
</select>

<div id='demo'>xyz</div>

提前致谢。

Answer 1

更改＆＃34;选择＆＃34; ＆＃34;更改＆＃34;事件

＆＃13;

＆＃13;

$(document).ready(function() {
  $('#selectOption').on("change", function() {
    var ab = $('#selectOption').val();
    if (ab == 'optionB') {
      $("#demo").hide();
    } else {
      $("#demo").show();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='selectOption'>
  <option>--select</option>
  <option value='optionA'>optionA</option>
  <option value='optionB'>optionB</option>
</select>

<div id='demo'>xyz</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个：

＆＃13;

＆＃13;

$(document).ready(function() {
    
    $("#selectOption").on("change",function(){
        
        if($(this).val() == "optionB" )
            
             $("#demo").hide(1000);
        
    })
    
})

＆＃13;

<select id='selectOption'>
    <option>--select</option>
    <option value='optionA'>optionA</option>
    <option value='optionB'>optionB</option>
</select>

<div id='demo'>xyz</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;