0

我想填写一个下拉列表，并编写了以下代码：

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

它不起作用，知道为什么吗？

4

2 回答 2

7

您的代码中有一些错误。

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

window.onload = fillDropDown();

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

window.onload = fillDropDown; // Without the parentheses.

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);
    }


}​

它就像一个魅力。您可以在此现场演示中看到它的实际效果：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>

¡瞧！

于 2012-05-02T01:00:28.880 回答
4

<script language="JavaScript1.2">应该<script type="text/javascript">
也window.onload = fillDropDown();应该window.onload = fillDropDown;

于 2012-05-02T01:02:44.077 回答