Dea*_*con 5 javascript innerhtml
在我的HTML页面中,我有2个选择菜单ID为"月"和"日" - 当页面加载时"天"为空,"月"有12个选项,值1-12对应于1月到12月.
"month"有一个调用此函数的onchange事件:
function showOutboundDays(month)
{
if(month==4 || month==6 || month==9 || month==11)
document.getElementById('day').innerHTML='<option value="1">1</option><option value="2">2</option>'; etc. up to 30
else if(month==2)
document.getElementById('day').innerHTML='<option value="1">1</option>'; etc. up to 28
else
document.getElementById('day').innerHTML='<option value="1">1</option>'; etc. up to 31
}
(想象一下,选项标签周围有大括号可以帮助你看...)
我认为很清楚看到我想要实现的目标......除了ID"day"的selectHT的innerHTML之外,一切都运行正常,无论你选择哪个月,它都不会被填满.我知道问题出在函数的这个阶段,因为当我将if,elseif和else代码更改为警报或类似的东西时,它工作正常.
有谁知道innerHTML的问题是什么？
谢谢
编辑:使用Firefox 3.6
RoT*_*oRa 13
我建议不要使用innerHTML
select- 它似乎错了.select元素具有易于使用的方法来添加新选项:Run Code Online (Sandbox Code Playgroud)`document.getElementById('day').options.add(new Option("1", "1"))`
上面创建的对象中的参数是:
new Option("optionText", "optionValue")
只是想添加到这个答案,因为它可能会澄清到这个帖子的人.
这是IE的已知问题。
解决方法的知识库文章：http : //support.microsoft.com/kb/276228
另外：dupe of： innerHTML replace不反映
编辑：这是基于您的代码的我的工作示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Selects</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style rel="stylesheet" type="text/css">
</style>
<script>
function showOutboundDays(month)
{
if(month==4 || month==6 || month==9 || month==11)
document.getElementById('day').innerHTML='<option value="1">1</option><option value="2">2</option>';
else if(month==2)
document.getElementById('day').innerHTML='<option value="1">3</option><option value="1">4</option>';
else
document.getElementById('day').innerHTML='<option value="1">5</option><option value="1">6</option>';
}
</script>
</head>
<body>
<select onchange="showOutboundDays(this.value);">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<br />
<select id="day">
</select>
</body>
</html>
您不应该使用innerHTML修改标签.你应该使用removeChild(element);和appendChild(element);
首先,您可以在变量中设置选择框,以便进行易读性和编辑;
var select = document.getElementById('days');
然后清除选择框
while ( select.childNodes.length >= 1 )
{
select.removeChild(select.firstChild);
}
最后,再次使用适当的值填充它
for(var i=1;i<=days;i++)
{
newOption = document.createElement('option');
newOption.value=i;
newOption.text=i;
select.appendChild(newOption);
}
最后,您的代码和我的代码在这里得到以下内容:
function showOutboundDays(month, year)
{
var days=null;
if(month==4 || month==6 || month==9 || month==11)
days=30;
else if(month==2)
{
//Do not forget leap years!!!
if(year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) //Provided by Justin Gregoire
{
days=29;
}
else
{
days=28;
}
}
else
days=31;
var select = document.getElementById('days');
while ( select.childNodes.length >= 1 )
{
select.removeChild(select.firstChild);
}
for(var i=1;i<=days;i++)
{
newOption = document.createElement('option');
newOption.value=i;
newOption.text=i;
select.appendChild(newOption);
}
}
闰年现已包括在内!
| 归档时间： |
|
| 查看次数： |
35973 次 |
| 最近记录： |