Selección de HTML, opción correcta seleccionada en DOM, pero el elemento incorrecto se muestra en firefox

Este es en realidad un problema resuelto de otra pregunta SO .

En el ejemplo jsFiddle aquí http://jsfiddle.net/5WrcD/2/show/ cuando cambias uno, el otro se sincroniza. Intente esto con Firebug activado y ambos menús de select ampliados.

Cuando carga la página por primera vez y cambia primero, seleccione 20 , el selected="selected" en ambos se convierte en 20 en DOM, pero no se muestra en la pantalla.

Alguna idea de por qué esto está sucediendo?

El ejemplo usa la biblioteca Ember.js , pero en cualquier caso, se supone que la pantalla refleja el estado DOM correcto?

Este error solo ocurre en Firefox, esta es una pregunta específica de Firefox

Funciona en Chrome / Safari, no en FF. Quizás estas dos advertencias de Ember.js significan algo:

  1. ADVERTENCIA: las propiedades calculadas pronto serán almacenables de forma predeterminada. Para habilitar esto en su aplicación, configure ENV.CP_DEFAULT_CACHEABLE = true . ember-0.9.8.1.js (línea 65)

  2. ADVERTENCIA: La forma en que el asistente {{view}} afecta a las plantillas está a punto de cambiar. Anteriormente, las plantillas dentro de las vistas secundarias usarían la nueva vista como contexto. Pronto, las vistas conservarán su contexto principal al representar su plantilla. Puede optar por el comportamiento nuevo al principio configurando ENV.VIEW_PRESERVES_CONTEXT = true . Para obtener más información, consulte https://gist.github.com/2494968 . Debe actualizar sus plantillas lo antes posible; este valor predeterminado cambiará pronto, y la opción se eliminará por completo antes de la versión 1.0.


Actualización # 1:

Parece que apagar todos los seleccionados (después de que se hayan creado los elementos) también ayuda. Adjuntar al final de su script:

 setTimeout( function (){ $('option').prop('selected',false); } , 100 ); // Anonymized as per Fabrício Matté's suggestion 

Nota: Puede haber una callback en la que puede hacerlo, en lugar de ejecutarla automáticamente 100ms después.


Actualización # 2:

También parece que en lugar de establecer las propiedades de la opción, puede eliminar el contenido de la creación de Ember:

 App.myController = Ember.Object.create({ //content: 10 /* comment out, remove, or set to '' instead of 10 */ }); 

Nota: No uso Ember, así que no sé si esto afectaría algo

Acabo de solucionar un problema similar al establecer el val para el elemento de selección.

Mi select tiene dos entradas, quería activar la segunda entrada mediante progtwigción (jQuery), lo que se puede hacer cambiando el atributo selected , pero Firefox 17.0 no redibujó la selección, no mostró la nueva option seleccionada.

  

Este jQuery-Snippet hizo el truco, ahora veo la selección “No” en FF 17.0 al modificarla programáticamente:

 var yesnosel = $("#yesno"); yesnosel.val("false"); yesnosel.find("option").removeAttr("selected"); yesnosel.find("option[value='false']").attr("selected", "selected"); 

Establecer el valor de val puede ser suficiente, pero también quería una selected option actualizada.

Algunas líneas de jQuery =)

http://jsfiddle.net/xXC9t/