我想填写一个下拉列表,我写了以下代码:
<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)
它不起作用,任何想法为什么?
您的代码中有一些错误.
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)
¡瞧!
| 归档时间: |
|
| 查看次数: |
99 次 |
| 最近记录: |