gpt4 book ai didi

javascript - 为什么这个函数没有在页面加载时执行? (如何在页面加载时使用 JavaScript 创建 HTML 选项)

转载 作者:行者123 更新时间:2023-11-28 11:13:38 25 4
gpt4 key购买 nike

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

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

它不起作用,知道为什么吗?

最佳答案

您的代码中有一些错误。

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>

瞧!

关于javascript - 为什么这个函数没有在页面加载时执行? (如何在页面加载时使用 JavaScript 创建 HTML 选项),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10406407/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com