时间戳

首页 > 解决方案 > 如何在更改事件javascript上调用触发器更改

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

问题描述

我有一个复选框，其中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');
    }
})

标签： javascriptselect

解决方案

您想将 optionschecked属性设置为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>

推荐阅读