显示所选选项的div不起作用

Question

我想：

• 选择ID为“showDiv”的选项时显示带有“.div”类的div，
• 未选中时再次隐藏。

我的代码无效。

问题：您知道问题出在哪里吗？

$('#showDiv').bind('change',function(e){
  event.preventDefault()
  $('.div').show("slow");
});

.div{
  display: none;
}

<form method="post">
  <div class="form-row">
    <div class="form-group">
      <label for="exampleFormControlSelect2">Select</label>
      <select class="form-control" id="exampleFormControlSelect1">
        <option selected class="selected">Option 1</option>
        <option id="showDiv">Option 2</option>
      </select>
    </div>
  </div>

  <div class="form-row div">
    <div class="form-group">
      <label for="inputName">Email</label>
      <input type="text" class="form-control" id="inputName">
    </div>
  </div>
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

change 活动适用于<select>，不适用于<option>元素

$('#exampleFormControlSelect1').on('change', function() {

    $(".div").toggle( $("#showDiv").is(":selected") );

});

.div{
  display: none;
}

<form method="post">
  <div class="form-row">
    <div class="form-group">
      <label for="exampleFormControlSelect2">Select</label>
      <select class="form-control" id="exampleFormControlSelect1">
        <option selected class="selected">Option 1</option>
        <option id="showDiv">Option 2</option>
      </select>
    </div>
  </div>

  <div class="form-row div">
    <div class="form-group">
      <label for="inputName" class="text-heading h6 font-weight-semi-bold">Email</label>
      <input type="text" class="form-control" id="inputName">
    </div>
  </div>
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>