JavaScript - innerHTML, не работающие с HTML, выбирают меню
В моей странице HTML у меня есть 2 избранных меню с идентификаторами "месяц" и "день" - "день" пуст, когда страница загружается, "месяц" имеет 12 опций со значениями соответствие 1-12 январю - декабрь.
"месяц" имеет 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
}
(просто предположите, что существуют фигурные скобки вокруг тегов опций, чтобы помочь Вам видеть...),
Я думаю, что это довольно ясно видеть то, чего я пытаюсь достигнуть..., и все хорошо работает кроме innerHTML выбора с помощью идентификатора "день", не становится заполненным вообще, независимо от того, какой месяц Вы выбираете. И я знаю, что проблема с этим этапом функции потому что, когда я изменяюсь, если, elseif и еще code-to-be-executed к предупреждениям или чему-то подобному, это хорошо работает.
Кто-либо знает, какова проблема с innerHTML?
Спасибо
Править: Использование Firefox 3.6
3 ответа
Это известная проблема для IE.
Статья базы знаний с обходным решением: http://support.microsoft.com/kb/276228
Также: дублирование: замена innerHTML не отражает
РЕДАКТИРОВАТЬ: Вот мой рабочий пример, основанный на вашем коде:
<!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');
Затем вы снимаете флажок box
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);
}
}
Високосные годы теперь включены!
Я бы посоветовал просто не использовать innerHTML в
select- это просто кажется неправильным. Элементыselectимеют простые в использовании методы для добавления новых параметров :`document.getElementById ('day'). options.add (new Option ("1", "1")) `
параметры в приведенном выше создании объекта:
new Option("optionText", "optionValue")
Просто хотел добавить к этому ответ, потому что это может прояснить тот, кто доберется до этого сообщения.