firefox vs 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>