Простой JavaScript работает только в FireFox

Question

Я создал скрипт, который требует выбора начального года, а затем отображает только годы от этого Начального года -> 2009. Это всего лишь начало-конец года.

Скрипт работает только в Firefox. Я ОБУЧАЮ javascript, поэтому я надеюсь, что кто-то может указать мне правильное направление. Живой сценарий можно найти на http://motolistr.com

<script type="text/javascript">
function display_year2(start_year) {
//alert(start_year);
if (start_year != "Any") {
    var i;
    for(i=document.form.year2.options.length-1;i>=0;i--)
    {
        document.form.year2.remove(i);
    }

    var x = 2009;
    while (x >= start_year) {
        var optn = document.createElement("OPTION");
        optn.text = x;
        optn.value = x;
        document.form.year2.options.add(optn);
        //alert(x);
        x--;
    }
}
else 
{
    var i;
    for(i=document.form.year2.options.length-1;i>=0;i--)
    {
        document.form.year2.remove(i);
    }
    var optn = document.createElement("OPTION");
    optn.text = "Any";
    optn.value = "Any";
    document.form.year2.options.add(optn);
} // end else
} // end function
</script>

Есть идеи?

Спасибо, Ник

Answer 1

Вы пытаетесь установить событие onclick для каждого параметра. IE не поддерживает это. Вместо этого попробуйте использовать событие onaged в элементе select.

Вместо этого:

<select name="year1" id="year1">
    <option value="Any" onclick="javascript:display_year2('Any');" >Any</option>
    <option value="2009" onclick="javascript:display_year2(2009);" >2009</option>
    <option value="2008" onclick="javascript:display_year2(2008);" >2008</option>
</select>

Попробуйте это:

<select name="year1" id="year1" onchange="javascript:display_year2(this.options[this.selectedIndex].value)">
    <option value="Any">Any</option>
    <option value="2009">2009</option>
    <option value="2008">2008</option>
</select>

Answer 2

Причина, по которой это не работает, отсутствует в вашем фрагменте кода:

<OPTION onclick=javascript:display_year2(2009); value=2009>

Option.onclick не является событием, которое обычно ожидается, но происходит в Firefox. Обычный способ обнаружения изменений в значениях выбора - через Select.onchange.

Также вам не нужно включать «javascript:» в обработчики событий, они не являются URL-адресами (также никогда не используйте javascript: URL-адреса). Кроме того, укажите ваши значения атрибута; это всегда хорошая идея, и она требуется, когда вы начинаете включать пунктуацию в значения. Кроме того, придерживайтесь строк для своих значений - вы вызываете display_year2 с Number, но option.value всегда является String; попытка работать со смешанными типами данных - это путаница.

В итоге:

<select onchange="display_year2(this.options[this.selectedIndex].value)">
    <option value="2009">2009</option>
    ...
</select>

Другие вещи:

var i;
for(i=document.form.year2.options.length-1;i>=0;i--)
{
document.form.year2.remove(i);
}

Вы можете покончить с циклом, написав в options.length. Также лучше избегать ссылок на имена элементов непосредственно из документов - используйте коллекцию document.forms [] или getElmentById:

var year2= document.getElementById('year2');
year2.options.length= 0;

Также:

var optn = document.createElement("OPTION");
optn.text = x;
optn.value = x;
document.form.year2.options.add(optn);

HTMLCollection.add не является стандартным методом DOM. Традиционный способ старой школы это сделать:

year2.options[year2.options.length]= new Option(x, x);

Answer 3

У меня были похожие проблемы с onchange, работающим в Firefox, но не в IE, а иногда и в Chrome. Я добавил ниже в моем теге головы, и все было хорошо (Поместите в метатег: я должен был убрать содержимое тега для этой заметки, чтобы она появилась) meta http-экв = "X-UA-совместимый" контент = "IE = край, хром = 1"

Примечание. Для этого необходимо: всегда запускать новейший механизм рендеринга IE (даже в интрасети) и Chrome Frame. НО: удалите его, если используете .htaccess

Answer 4

Попробуйте установить длину вручную.

document.form.year2.options.length = number_of_items.

Answer 5

Хотя это не решение вашей проблемы; вы ссылаетесь на поле ввода неверным образом: document.form.year2 должно быть document.getElementById('year2'). Я также заметил, что ваш текущий скрипт работает в Opera.

Answer 6

Поглядывая вокруг, я нашел кое-что о проблеме с createElement в IE: http://webbugtrack.blogspot.com/2007/10/bug-235-createelement-is-broken-in-ie.html

Существует также ссылка на страницу с обходным решением. Надеюсь, это поможет вам.