Почему это событие JavaScript не работает на IE ..? - PullRequest
1 голос
/ 08 февраля 2010

Я пытаюсь загрузить параметры в раскрывающийся список в зависимости от выбора, сделанного в другом раскрывающемся списке. Я написал код, который работает практически во всех основных браузерах, FF, Opera, Safari, но не работает в IE7.

Вот мой код Javascript:

<script type = "text/javascript">
var txt1 = "<option>state1<\/option><option>state2<\/option><option>state3<\/option><option>state4<\/option>";
var txt2 = "<option>stateA<\/option><option>stateB<\/option><option>stateC<\/option><option>stateD<\/option><option>stateE<\/option>";

function states_val() {

    if(document.getElementById("country").options[0].selected==true) {
        document.getElementById("states").disabled=true;
        document.getElementById("states").innerHTML="<option>Select country<\/option>";
    }
    else if(document.getElementById("country").options[1].selected==true) {
        document.getElementById("states").disabled=false;
        document.getElementById("states").innerHTML=txt1;
    }
    else if(document.getElementById("country").options[2].selected==true) {
        document.getElementById("states").disabled=false;
        document.getElementById("states").innerHTML=txt2;
    }
}
</script>

И HTML-код:

<select id="country" name="name_country" onchange="states_val()">
    <option>select</option>
    <option>country1</option>
    <option>country2</option>
</select>
<select id="states" name="name_states"></select>

Я связан со сценариями на стороне клиента и должен имитировать это, используя только Javascript. пожалуйста, помогите мне отладить код.

Ответы [ 2 ]

7 голосов
/ 08 февраля 2010

Да, многие из 'специальных' элементов, таких как <select> и <table>, не могут иметь свои innerHTML, установленные в IE.

Если вы хотите установить innerHTML из строки, вы должны обойти это окольным путем: установите innerHTML временных div элементов на <select> + ваши опции + </select>, затем переместите все объекты опций от нового выбора до старого.

Обычно лучше использовать методы DOM вместо innerHTML и экранированной разметки:

function setOptions(select, options) {
    select.options.length= 0;
    for (var i= 0; i<options.length; i++)
        select.options[i]= new Option(options[i]);
}

var statemap= [
     ['Select country'],
     ['Karnataka', 'MP', 'UP', 'Jammu & Kashmir', 'Himachal Pradesh'],
     ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Delaware', 'Florida']
];
function states_val() {
    var states= statemap[document.getElementById('country').selectedIndex];
    setOptions(document.getElementById('states'), states);
}
2 голосов
/ 08 февраля 2010

Я думаю, что это подтвержденная ошибка (http://alexle.net/archives/150), решение состоит в том, чтобы заменить весь элемент select, а не только innerHTML (параметры ..)

В качестве альтернативы вы можете вручную создать узлы опций с помощью

var anOption = document.createElement('option');
anOption.innerHTML = '..';
anOption.value = '..';
document.getElementByID('states').appendChild(anOption);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...