加载后jQuery触发选择选项

Posted 2023-02-23

【中文标题】加载后jQuery触发选择选项

【英文标题】：jQuery trigger select option after load

【发布时间】：2022-01-13 21:32:34

【问题描述】：

请问有人可以帮我写代码吗？我想在页面加载后更改选择中的选项，因为表单是用 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);

);

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

【问题讨论】：

也许你的意思是$(window).on( "load"...？加载后使用$(document).ready(function() ... 访问DOM。 learn.jquery.com/using-jquery-core/document-ready - 如果你想等待所有图像和 iframe 加载，你可以使用 $(window).on( "load", function() ... ) ***.com/questions/4584373/…

【参考方案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>

【讨论】：

您的解决方案也不起作用。所以我发现所有的“选项”都是在 on.load 中生成的。当我尝试更改选项时，选项还没有。

一旦选项确实存在，设置选择值仍然更简单