使用jQuery等待所有选择选项加载完毕

Question

使用jQuery等待所有选择选项加载完毕

7

我有一个下拉框对象，并使用所选值作为输入调用ajax函数Onchange。我还希望在选择框首次加载时调用相同的函数。我使用jQuery .load，但是ajax函数在任何选项加载之前就被调用了，导致我的ajax函数的输入为未定义。有人知道如何让jQuery在调用函数之前等待所有选项加载吗？

谢谢。

编辑 - 添加代码我发现setTimeout（）非常适合延迟函数。但是，我使用setTimeout（）会感到紧张，因为如果页面加载比平常慢，它将无法正常工作。我尝试按照您建议的用$(document).ready替换超时，但是该函数仍然在选择选项之前被调用，输入未定义。

以下是代码：

<script type="text/JavaScript">    
    setTimeout('AjaxFunction($("#SelectID option:selected").val()));', 400);
</script>

<select id="SelectID" name="SelectName" onchange="AjaxFunction(this.value);">
<option value='Inland Empire'>Inland Empire</option>
<option value='San Bernardino'>San Bernardino</option>  
<option value='Riverside'>Riverside</option>
<option value='California'>California</option>  
</select>

- Brian

Brian，你应该提供更多关于选择选项如何加载的信息。根据你下面的评论得知，它是通过ajax加载的。 - Anthony Serdyukov

<script>和<select>标签是否都在你用.load()加载到另一个目标的内容中？ - gnarf

6个回答

9

你能展示一下你目前的代码吗？使用jQuery的ready()函数可以实现你想要的效果。它会在整个DOM加载完成后再执行。

 $(document).ready(function(){
    //code here runs after the DOM is created
 });

- Vincent Ramdhanie

1

我不相信这对OP有用 - 他们似乎通过在另一个div上使用.load()来加载<script>和<select>，在这种情况下，$(document).ready()不会触发。 - gnarf

3

如果您首次使用jquery.load加载选择框的内容，则应使用load函数的回调参数添加您的ajaxFunction ..

所以..

无论何时调用load函数，都要像这样做。

$("some_selector_where_you_load_the_select_box")
.load("somepage.htm", 
      function(){ AjaxFunction( $("#SelectID option:selected").val() ); }
     );

另外，你可以通过触发change事件来让选择框自己处理AjaxFunction，而不是自己调用AjaxFunction...(如果你在多个选择框中这样做会很有用)

就是这样

$("some_selector_where_you_load_the_select_box")
.load("somepage.htm", 
      function(){ $("#SelectID").change(); }
     );

- Gabriele Petrioli

1

对于change()的改变和使用load()回调函数，给予+1。猜测这是正确的解决方案，因为选择选项是通过ajax加载的。 - Anthony Serdyukov

2

jQuery的 document.ready 应该可以工作。你正在测试哪个浏览器？试试使用 Firefox 和 Firebug 查看是否报告了任何错误。在你的 setTimeout 代码中，多了一个闭合括号。这可能会导致问题出现。

- kgiannakakis

我会尝试使用Firefox。到目前为止，我一直在使用Chrome。实际上，我没有复制和粘贴那个函数，只是重新编写了我在代码中工作的内容。选择框是通过JavaScript动态加载的，这就是为什么document.ready不起作用的原因。使用SetTimout效果还不错，但是如果AjaxFunction花费的时间比平常长，那么函数将在选择对象出现之前被调用，并且它将无法正常运行。 - Brian

4

如果您正在使用jQuery Ajax方法动态加载选择框（例如$.load），那么应该在Ajax方法的回调函数中调用AjaxFunction。 - kgiannakakis

1

作为$(document).ready(function() {...})语法的快捷方式，您可以使用以下代码在文档准备就绪后立即运行一些代码：

$(function() {
    alert("doc ready");
});

因此，一个完整的示例将是：

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.3.2.js"></script>
    <script type="text/JavaScript">
        function AjaxFunction(val) {
            alert(val);
        }

        $(function() {
            AjaxFunction($("#SelectID option:selected").val());
        });
    </script>
</head>
<body>
    <select id="SelectID" name="SelectName" onchange="AjaxFunction(this.value);"> 
        <option value='Inland Empire'>Inland Empire</option>
        <option value='San Bernardino'>San Bernardino</option>
        <option value='Riverside'>Riverside</option>
        <option value='California'>California</option>
    </select>
</body>

- Adam

1

实现这个的最佳方法是延迟设置选择器的on change触发器，并动态地告诉它在更改时要执行什么操作。为了让它尽快触发，只需利用change()函数即可。因此，代码如下：

$(document).ready(function(){

  //At this point the select should be fully built, dynamically add the on change handler.

  $('#SelectID').change(AjaxFunction);

  //Fire the change event immediately.

  $('#SelectID').change();
});

- Will Madison

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gnarf · Accepted Answer

你应该考虑移除onchange=，并使用以下方法之一来绑定事件/执行它：

<select id="SelectID" name="SelectName">
  <option value='Inland Empire'>Inland Empire</option>
  <option value='San Bernardino'>San Bernardino</option>  
  <option value='Riverside'>Riverside</option>
  <option value='California'>California</option>  
</select>

<script type="text/JavaScript">
    // placing the script after the select SHOULD ensure it executes after the 
    // select has been created
    $("#SelectID").change(function() {  // bind a change event:
      AjaxFunction($(this).val());
    }).change(); // and trigger a "change" event immediately

    // If you are using .load to bring #SelectID into existence, 
    // it would be much better to put the whole segment into the callback of
    // .load() as suggested by gaby

    $("#sometarget").load("/some-url-with-select-box", function() {
      // bind and trigger change event (alternate forms)
      $("#SelectID").bind('change', function() {
        AjaxFunction($(this).val());
      }).trigger('change');    
    });
</script>