Question

我有一个选择框对象，并且使用所选值作为输入将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>

Answer 1

您应该考虑删除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>

Answer 2

你能展示到目前为止的一些代码吗？使用jQuery的ready（）函数应该可以实现你想要的。它基本上等待整个DOM在执行之前加载。

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

Answer 3

如果你第一次使用jquery.load首次加载选择框的内容，那么你应该使用load函数的callback参数添加你的ajaxFunction ..

所以..

无论何时/何时调用加载函数都会像这样执行

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

也可以自己调用AjaxFunction，而不是自己调用AjaxFunction，让select框自己处理AjaxFunction ..（如果用多个选择框执行此操作很有用）

那将是

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

Answer 4

jQuery的document.ready应该可行。您正在测试哪种浏览器？尝试使用Firebug的Firefox来查看是否报告了任何错误。在你的setTimeout代码中，你有一个额外的右括号。这会导致问题吗？

Answer 5

作为 $（document）.ready（function（）{...}）语法的快捷方式，您可以使用以下命令在文档准备就绪后运行一些代码：< / p>

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

Answer 6

实现此目的的最佳方法是延迟选择的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();
});

jQuery等待加载所有选择的选项

6 个答案: