Seleccionar opciones que no se muestran en IE

Question

Tengo una selección generada dinámicamente con algunas opciones y muestra las opciones bien en los navegadores normales, pero sus opciones están vacías en IE. Aquí está el código HTML generado:

<select name="0" id="custom_0" style="border-bottom: #c0cedb 1px solid; border-left: #c0cedb 1px solid; background-color: #ededed; width: 280px; font-size: 0.87em; border-top: #c0cedb 1px solid; border-right: #c0cedb 1px solid"> 
    <option id="1000" value="0" name="00">1x2GB ECC DDRIII 2GB ECC DDRIII</option> 
    <option id="1001" value="10" name="01">2x2GB ECC DDRIII 4GB ECC DDRIII (+10.00 €)</option> 
</select> 

realmente no puedo mostrarle el javascript, ya que hay mucho de ella y yo sería capaz de hacer que sea sencillo sólo para una demostración. Quizás algunos de ustedes hubieran tenido una experiencia similar y podrían resolver esto. Gracias

he añadido algo de JavaScript:

función

$('#custom_order').append('<tr id="custom_'+category+'_row"><td'+padding+'>'+header+'<select id="custom_'+category+'" name="'+category+'" style="background-color:#EDEDED;border:1px solid #C0CEDB;width:280px;font-size:0.87em"></select>'+plusspan+'</td></tr>'); 

for (var i=0;i<components[category]['value'].length;i++){ 
    $('#custom_'+category).append('<option id="'+components[category]['value'][i]['id']+'" value="'+components[category]['value'][i]['price']+'"></option>'); 
    removals(category,i); 
    dependencies(category,i); 
    selectInput(category); 
} 
getDiff(category); 

getDiff() suma los valores de las opciones con la función html(). Lo extraño es que si señalo el html de la opción justo después de la función getDiff(), muestra el valor completado. Y puse la función getDiff() en el ciclo for donde se generan las opciones, llena los valores y los muestra en IE, pero no el último.

Estoy llamando getDiff() fuera del bucle para la optimización, y ya que puedo agregar los valores más tarde después de que se generen todas las opciones. Bueno, al menos pensé que podría, ya que funciona en Firefox y Chrome.

Answer 1

Sin conocer su JavaScript es difícil responder a esto. ¿Puedes incluso dar un fragmento de código de muestra que demuestre cómo el JavaScript está haciendo la generación dinámica?

Dicho esto, he encontrado problemas en esta área antes de ahora. Generalmente, ha surgido de especificar las 'opciones' como el HTML para seleccionar, en lugar de crear un elemento DOM 'SELECCIONAR', crear los elementos DOM 'OPCIONES' asociados y luego adjuntarlos correctamente al DOM de la manera correcta.

jQuery debe cambiar esto por usted, pero, de nuevo, es difícil saber cuál es su problema sin al menos algún código.

Answer 2

que está recibiendo este comportamiento porque Identificación y nombre atributos no se espera que en opción etiquetas por algunos navegadores.

Answer 3

Tuve exactamente el mismo problema donde la creación de opciones en su selección no se muestra en IE.

No pude entender qué estaba pasando mal ya que mi código funcionaba bien en FF, así que agregué FireBug Lite a mi página, e intenté inspeccionar la lista desplegable.

Pude ver que las opciones que se creaban actaully en la lista desplegable, pero que IE simplemente no las mostraba.

Esto parece ser un problema de renderizado que afecta a IE 7 (no he probado en ninguna otra versión).

Lo que se disparó es que cuando inspecciona su página, FireBug aplicará un efecto de resaltado sobre el control en foco, este resaltado en realidad hizo que la lista desplegable mostrara las opciones faltantes.

Así que pensé que aplicar un cambio de estilo a la lista desplegable debería ser suficiente para solucionar el problema.

$('<option value="1">One</option><option value="2">Two</option>') 
.appendTo($('#MyDDL')); 
$('#MyDDL').css('display', 'inline'); 

Ahora debería poder ver sus opciones.

Answer 4

También tuve este problema.Yo estaba usando IE 8. Yo estaba usando un comunicado $ .Cada para llenar mi lista desplegable de la siguiente manera:

$.each(myObject.categories, function (count, item) { $('#ddlCategories').append(new Option(item, count)); }); 

Esto funcionó bien en cromo y FF, pero no IE. Cambié a:

$.each(myObject.categories, function (count, item) { $('#ddlCategories').append('<option value="' + count + '">' + item + '</option>'); }); 

y funcionó bien en los 3 navegadores.

Answer 5

Tuve problemas similares. Después de mucho lío, siguiendo las sugerencias de otros encuestados, descubrí que la única forma de hacer que las cosas funcionen en IE8 era compilar la cadena de opciones completa y luego almacenarla con $ (# idOfMyElement) .html (algunos datos)

> <select id='mySelect'> 
>  <option>Dummy placeholder</option> 
    </select> 
> 
> <script type='text/javascript'> 
> 
>  $.ajaxSetup({cache: false}); // Or next time IE will not run your script 
> 
>  function setOption(...) { 
>  ... 
>  data = ' ... '; 
>  $('#mySelect').html(data); 
>  ... 
>  } </script> 

Answer 6

Tuve este problema cuando estaba usando innerHTML para insertar las opciones generadas como cadenas de texto. La solución fue hacer el trabajo correctamente agregando las opciones a su selección, p.

var optionRow = document.createElement("option"); 
optionRow.setAttribute("value", varName1); 
var textNode = document.createTextNode(varName2); 
optionRow.appendChild(textNode); 
document.getElementById("id_of_select").appendChild(optionRow); 

IE was happy then. (Yo también.)