Question

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

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

<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只会执行与其绑定的任何处理程序，而不会影响其状态。

$(".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>

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

1 个答案: