如何在选择选项中使用 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>