为什么此功能在页面加载时不执行?(如何在页面加载时使用JavaScript创建HTML选项)

and*_*and 0 javascript

我想填写一个下拉列表,我写了以下代码:

<script language="JavaScript1.2">
window.onload = fillDropDown();

function fillDropDown() {

        var ddl = document.getElementById("dia");
    var theOption = new Option;
    var x;
    var i;

    for(i = 1; i < 32; i++) {
        x = i + 1;
        theOption.text = x;
        theOption.value = x;
        ddl.options[i] = theOption;
    }


}

</script>
   <body>
    <form>
           <select id=dia></select>
    </form>
   <body>
Run Code Online (Sandbox Code Playgroud)

它不起作用,任何想法为什么?

Rub*_*zzo 7

您的代码中有一些错误.

1.第一个常见错误如下:

window.onload = fillDropDown();
Run Code Online (Sandbox Code Playgroud)

此前代码正在注册被调用函数的结果,fillDropDown然后将其结果分配到window.onload.因此,这永远不会做某事.要注册事件,您必须分配一个函数而不是被调用函数结果.区别在于:

window.onload = fillDropDown; // Without the parentheses.
Run Code Online (Sandbox Code Playgroud)

2.我又发现一个错误,是对创作的option元素.在JavaScript中创建HTML元素的更好方法是使用几乎标准的 document.createElement函数.

3.您的HTML标记也有错误.你select写的是:<select id=dia></dia>应该是<select id="dia"></select>;

因此,所有这些更改突出显示,结果代码将如下所示:

window.onload = fillDropDown;

function fillDropDown() {

    var ddl = document.getElementById("dia");
    var theOption;
    var x;
    var i;

    for (i = 1; i < 32; i++) {
        x = i + 1;
        theOption = document.createElement('option');
        theOption.label = x;
        theOption.value = x;
        ddl.add(theOption, null);
    }


}?
Run Code Online (Sandbox Code Playgroud)

它就像一个魅力.你可以在这个现场演示中看到它:http://jsfiddle.net/dyjLS/

注意:强烈建议使用JavaScript库jQuery来执行此操作,因为它将处理几乎所有跨浏览器的不一致性.如果您使用它,您的代码将如下所示:

<script type="text/javascript">
  jQuery( document ).ready( function($) {
    var $select = $('#dia');
    for ( var i = 1 ; i < 32 ; i++) {
      var x = i + 1;
      $select.append('<option value='+ x +'>'+ x +'</option>');
    }
  });
</script>
Run Code Online (Sandbox Code Playgroud)

¡瞧!