Не удается добавить в IE, работает в Firefox и Chrome

Question

Я думаю, что IE ненавидит меня. Все, что я делаю в других браузерах, работает, но IE 11, нет! Он терпит неудачу. Я предполагаю, что это я, а не браузер.

У меня есть список <select> на моей веб-странице, и я пытаюсь связать <option> динамически.

До сих пор он отлично работает в Firefox и Chrome, но не в IE. В средствах разработки IE нет ошибок (F12), поэтому я потерял то, почему он отказывается работать.

JSFIDDLE

HTML

<select id="MyList"> 
</select> 

Javascript

$(function() { 
    var myItems=[]; 
    myItems.push({"All":"Hello"}); 
    myItems.push({"One":"And More"}); 
    myItems.push({"Two":"Lots More"}); 

    for (i = 0; i< myItems.length;i++) { 
     for (item in myItems[i]) { 
      var x = myItems[i][item]; //for my testing 
      var y = myItems[item]; //for my testing 
      $("#MyList").append("<option>" + item + "</option>"); 
     } 
    } 
}); 

Если вы пытаетесь скрипку в FF или Chrome, все хорошо. Список select заполняется All, One и Two.

Не хватает подарка или даже некоторой формы жертвы для эльфов IE, что мне нужно сделать, чтобы сделать IE счастливым со мной?

Answer 1

Это странно. Когда я запускаю эту скрипту в IE, у меня есть удобный (IE9), я получаю ошибку «отказ в доступе», а jQuery не загружается. Если я изменю скрипту, чтобы использовать 1.11.0, а не 1.10.1, я не получаю эту ошибку и скрипт работает.

Есть пара проблем с кодом, в первую очередь необъявленные переменные (ваш код падал до The Horror of Implicit Globals); вот updated fiddle с:

• объявления переменных
• Использование JQuery 1.11.0
• не используя «нет обертку - тело» вариант, а не «OnLoad», так как вы используете готовый событие

Вот код:

$(function() { 
    var myItems=[]; 
    myItems.push({"All":"Hello"}); 
    myItems.push({"One":"And More"}); 
    myItems.push({"Two":"Lots More"}); 

    var i, item; 
    for (i = 0; i< myItems.length;i++) { 
     for (item in myItems[i]) { 
      var x = myItems[i][item]; 
      var y = myItems[item]; 
      $("#MyList").append("<option>" + item + "</option>"); 
     } 
    } 
}); 

Отдельно, хотя, чтобы быть совместимым с более широким диапазоном O f, вы можете использовать конструктор Option и метод add списка options, а не добавлять элемент DOM; некоторые старые браузеры предпочитают это. Это выглядит следующим образом: Fiddle

// Before the loop... 
var options = $("#MyList")[0].options; 

// ...in the loop 
options.add(new Option(item)); 

Answer 2

Попробуйте

$(function() { 
    var myItems=[]; 
    myItems.push({"All":"Hello"}); 
    myItems.push({"One":"And More"}); 
    myItems.push({"Two":"Lots More"}); 


    for (i = 0; i< myItems.length;i++) { 
     for (item in myItems[i]) { 
      var x = myItems[i][item]; 
      $('#MyList') 
      .append($("<option></option>") 
      .attr("value",x) 
      .text(item)); 
     } 
    } 
}); 

Answer 3

JSFIDDLE

var sel = $("#MyList"); 
sel.empty();     
for (var i = 0; i< myItems.length;i++) { 
    for (var item in myItems[i]) { 
     var x = myItems[i][item]; 
     var y = item; 
     console.log(x); 
     console.log(y);    
     sel.append('<option value="' + x + '">' + y + '</option>'); 
    } 
} 

Как уже упомянуто @ T.J.Crowder в IE 10 jquery1.10.1 не работает и обновление версии JQuery, чтобы позже он начал работать;