如何在选择选项中使用 jQuery 隐藏效果

Question

我还有一个疑问，我已经接近答案了，但没有让它发挥作用。实际上我有一个默认输入文本和默认下拉列表（下拉列表由西孟加拉邦和其他人组成）。现在，如果有人在下拉菜单下单击西孟加拉邦，则默认输入应隐藏，而西孟加拉下拉列表应显示。

下面是我尝试过的代码。任何人都可以请指导我对jQuery有点陌生。

$(document).ready(function() {

  $("#state").on("select", function() {

    if ($(this).val() ===

      "WestBengal") {

      $(".otherdistricts").hide();

      $(".westbengaldistrict").show();

    }

  });

});

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

<div class="col-sm-4">

  <div class="form-group">

    <select id="state" name="state" class="form-control" required="true" autocomplete="false" style="margin-bottom:10px">

      <option value="" disabled="" selected="">Select State</option>

      <option value="WestBengal">West Bengal</option>

      <option value="Others">Others</option>

    </select>

  </div>

</div>

<div class="col-sm-4">

  <div class="form-group 

               otherdistricts">

    <input class="form- 

             control form-control-lg" type="text" name="other_district" id="other_district" placeholder="Enter Your District" autocomplete="false">

  </div>

  <div class="westbengaldistrict" style="display:none">

    <select class="form- 

             control" name="district" id="district" autocomplete="false">

      <option value="" selected disabled>Select Your District</option>

      <option value="Alipurduar">Alipurduar</option>

      <option value="Bankura">Bankura</option>

      <option value="PaschimBardhaman">Paschim Bardhaman</option>

      <option value="PurbaBardhaman">Purba Bardhaman</option>

      <option value="Birbhum">Birbhum</option>

      <option value="CoochBehar">Cooch Behar</option>

    </select>

  </div>

</div>