Firefox против Chrome JQuery выберите

Question

у меня 2 select. Первый выбор обязателен. Второй выбор необходим с условиями display: none и disabled.

Если пользователь выбирает rev из первого выбора, он скрывает второй выбор. Если пользователь выберет approve из первого выбора, он покажет второй выбор и удалит атрибут disabled.

Он отлично работает в Firefox, но при попытке в Chrome это не удается. Что не так с моим кодом?

$(document).ready(function() {
  //alert('work di firefox, chrome gagal');
  $("#netral").on("click", function() {
    $("#target1").show();
    $("#target2").addAttr("disabled", false);
  });
  $("#revisi").on("click", function() {
    $("#target1").hide();
  });
  $("#approve").on("click", function() {
    $("#target1").show();
    $("#target2").removeAttr("disabled", false);
  });
});

select {
  height: 2rem;
  width: 10rem;
  border: solid 1px rgba(0, 0, 255, 0.5);
  border-radius: 5px;
}

select:hover {
  border: solid 2px rgba(0, 0, 255, 0.5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-6">
    Select 1
    <select name="status" id="status" required>
      <option value="" id="netral"> - </option>
      <option value="1" id="rev"> Rev </option>
      <option value="3" id="approve"> Approve </option>
    </select>
  </div>
  <div class="col-md-6" id="target1">
    Select 2
    <select class="form-control" name="data" id="target2" disabled required>
      <option value=""> - </option>
      <option value="1">Supl 1</option>
      <option value="2">Supl 2</option>
    </select>
  </div>
</div>

Answer 1

Проблема в том, что вы подключаете обработчики событий click непосредственно к элементам option, что не очень хорошо поддерживается.

Лучший способ - добавить обработчик событий change кselect и проверьте его value в этой точке. Затем вы можете скрыть / показать и включить / отключить все соответствующие элементы оттуда. Попробуйте это:

$(document).ready(function() {
  let $target1 = $('#target1');
  let $target2 = $('#target2');
  
  $('#status').on('change', function() {
    var value = $(this).val();
    if (value === '' || value === '3') {
      $target1.show();
      $target2.prop("disabled", false);
    } else if (value === '1') {
      $target1.hide()
    }    
  });
});

select {
  height: 2rem;
  width: 10rem;
  border: solid 1px rgba(0, 0, 255, 0.5);
  border-radius: 5px;
}

select:hover {
  border: solid 2px rgba(0, 0, 255, 0.5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-6">
    Select 1
    <select name="status" id="status" required>
      <option value=""> - </option>
      <option value="1" id="rev"> Rev </option>
      <option value="3" id="approve"> Approve </option>
    </select>
  </div>
  <div class="col-md-6" id="target1">
    Select 2
    <select class="form-control" name="data" id="target2" disabled required>
      <option value=""> - </option>
      <option value="1">Supl 1</option>
      <option value="2">Supl 2</option>
    </select>
  </div>
</div>

Answer 2

Спасибо, Рори МакКроссан. Это работает!

еще раз, большое спасибо.

$(document).ready(function() {
  let $target1 = $('#target1');
  let $target2 = $('#target2');
  
  $('#status').on('change', function() {
    var value = $(this).val();
    if (value === '' || value === '3') {
      $target1.show();
      $target2.prop("disabled", false);
    } else if (value === '1') {
      $target1.hide()
    }    
  });
});

select {
  height: 2rem;
  width: 10rem;
  border: solid 1px rgba(0, 0, 255, 0.5);
  border-radius: 5px;
}

select:hover {
  border: solid 2px rgba(0, 0, 255, 0.5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-6">
    Select 1
    <select name="status" id="status" required>
      <option value=""> - </option>
      <option value="1" id="rev"> Rev </option>
      <option value="3" id="approve"> Approve </option>
    </select>
  </div>
  <div class="col-md-6" id="target1">
    Select 2
    <select class="form-control" name="data" id="target2" disabled required>
      <option value=""> - </option>
      <option value="1">Supl 1</option>
      <option value="2">Supl 2</option>
    </select>
  </div>
</div>