加载后jQuery触发选择选项

Question

请问有人可以帮我写代码吗？我想在页面加载后更改选择中的选项，因为表单是用 DOM 生成的。

我不知道为什么 - 使用“onClick”是否有效：

$(window).load(function() { 
 $( "#target" ).click(function() {
    $("#filter_1 option[value=11]").attr('selected', 'selected').trigger('change');
 }); 
});

但我想在不点击的情况下更改选择，但这是行不通的：

$(window).load(function() { 
    $("#filter_1 option[value=11]").attr('selected', 'selected').trigger('change');
});

我做错了什么？

编辑 - 当我尝试更改它们时，我发现所有“选项”都不存在。工作解决方案是：

$(function() {

  function changeOption() {
    $("#filter_1 option[value=11]").attr('selected', 'selected').trigger('change'); 
  }

  setTimeout(function(){
    changeOption();
  }, 500);

});

还有比超时更好的解决方案吗？

Answer 1

您的代码中有几个问题。

第一个 $(window).load(func... 已弃用。改用$(function(){...，它是$(document).ready(function 的简写

接下来，<option> 上没有 change 事件，您需要在父级 <select> 上触发它

最后你可以通过设置父<select>的值来简化选项上的attr('selected')

$(function() {

  // change event listener
  $('#filter_1').change(function() {
    console.log('Changed value to: ', this.value);
  })

  // set the value and trigger the change
  $('#filter_1').val(11).change()

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="filter_1">
  <option value=""> ---- </option>
  <option value="10"> 10 </option>
  <option value="11"> 11 </option>
  <option value="12"> 12 </option>
</select>