javascript - 如何在更改事件javascript上调用触发器更改

Question

我有一个复选框，其中 if isChecked = 1 将显示一个选择元素，然后从选择中您可以从选项中进行选择。然后 if isChecked = 0 选择元素隐藏，并假设将所选选项重置为其默认选项。

场景我检查了输入框。 然后选择元素出现然后我选择一个房间。 然后我改变了主意，所以我取消选中了输入框。 应该发生的是将所选选项更改为其默认选项。 但是当我重新检查输入框时，我选择的选项仍然标记为已选择的选项。

<div class="form-group">
  <input type="checkbox" name="isChecked"><span>isChecked </span>
</div> 

 <div class="form-group technical">
    <label>Rooms</label>
    <select class="form-control technicalrooms" name="technicalrooms">
      <option selected disabled>Select Room</option>
      <option value="Function Room">Function Room</option>
      <option value="Meeting Room">Meeting Room</option>
    </select>  
  </div>

这是我的代码。

$('.technical').hide();
$('[name="isChecked"]').on('change', function () {
    var val = ($(this).is(':checked') == true) ? 1 : 0;

    if(val == 1){
          $(".technical").show();
    }else{
          $(".technical").hide();

          $(".technicalrooms option:first").trigger('change');
    }
})

Answer 1

您想将选项 checked 属性设置为 true 而不是触发 change。触发 change 只会执行绑定(bind)到它的任何处理程序，不会影响它的状态。

$(".technicalrooms option:first").prop('selected', true);

工作演示

$('.technical').hide();

$('[name="isChecked"]').on('change', function () {
    var val = ($(this).is(':checked') == true) ? 1 : 0;

    if(val == 1){
          $(".technical").show();
    }else{
          $(".technical").hide();
          var trooms = $(".technicalrooms');
          $("option:first", trooms).prop('selected', true);
          trooms.trigger('change');
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="form-group">
  <input type="checkbox" name="isChecked"><span>isChecked </span>
</div> 

 <div class="form-group technical">
    <label>Rooms</label>
    <select class="form-control technicalrooms" name="technicalrooms">
      <option selected disabled>Select Room</option>
      <option value="Function Room">Function Room</option>
      <option value="Meeting Room">Meeting Room</option>
    </select>  
  </div>