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

将“选择”事件更改为“更改”事件。

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

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