javascript - 如何在选择选项中使用 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>
      <option value="Darjeeling">Darjeeling</option>
      <option value="UttarDinajpur">Uttar Dinajpur</option>
      <option value="DakshinDinajpur">Dakshin Dinajpur</option>
      <option value="Hooghly">Hooghly</option>
      <option value="Howrah">Howrah</option>
      <option value="Jalpaiguri">Jalpaiguri</option>
      <option value="Jhargram">Jhargram</option>
      <option value="UttarDinajpur">Uttar Dinajpur</option>
      <option value="Kalimpong">Kalimpong</option>
      <option value="Malda">Malda</option>
      <option value="PaschimMedinipur">Paschim Medinipur</option>
      <option value="PurbaMedinipur">Purba Medinipur</option>
      <option value="Murshidabad">Murshidabad</option>
      <option value="Nadia">Nadia</option>
      <option value="North24Parganas">North 24 Parganas</option>
      <option value="South24Parganas">South 24 Parganas</option>
      <option value="Purulia">Purulia</option>
    </select>
  </div>
</div>

Answer 1

'select' 不是您期望的 jQuery 事件。它与文本输入和文本区域中的文本选择有关。 当选择字段的值发生更改时，您应该使用“更改”。

$(document).ready(function() {

  $("#state").on("change", 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>
      <option value="Darjeeling">Darjeeling</option>
      <option value="UttarDinajpur">Uttar Dinajpur</option>
      <option value="DakshinDinajpur">Dakshin Dinajpur</option>
      <option value="Hooghly">Hooghly</option>
      <option value="Howrah">Howrah</option>
      <option value="Jalpaiguri">Jalpaiguri</option>
      <option value="Jhargram">Jhargram</option>
      <option value="UttarDinajpur">Uttar Dinajpur</option>
      <option value="Kalimpong">Kalimpong</option>
      <option value="Malda">Malda</option>
      <option value="PaschimMedinipur">Paschim Medinipur</option>
      <option value="PurbaMedinipur">Purba Medinipur</option>
      <option value="Murshidabad">Murshidabad</option>
      <option value="Nadia">Nadia</option>
      <option value="North24Parganas">North 24 Parganas</option>
      <option value="South24Parganas">South 24 Parganas</option>
      <option value="Purulia">Purulia</option>
    </select>
  </div>
</div>