¿Por qué IE no agrega <option> a mi dropDown? - jquery, internet-explorer, jquery-ui, internet-explorer-8, internet-explorer-9

Yo estoy corriendo esto script de muestra con IE:

var $select = $("#select");
var $button = $("#button");

$button.click(function() {
var $option = $("<option />");
$option.text("hello");
$option.appendTo($select);
});

var $tabs = $("#tabs");
$tabs.tabs();

Es bastante sencillo: al hacer clic en el botón, un option debería agregarse a mi menú desplegable. Esto funciona muy bien: el fct básico en IE tampoco.

Mi problema:
simplemente "abra" el menú desplegable y "vuelva a cerrarlo". Ahora cambie a la pestaña "botón" y presione el botón. Ahora cambie a la pestaña "seleccionar" - un nuevo option Deberia estar disponible.
Esto funciona muy bien en todos los navegadores, excepto IE ... (a veces IE falla después de varios cambios de tabulación)

¿Cómo puedo arreglar mi script?

Respuestas

Hay una manera mucho más simple y más amigable para los navegadores de agregar opciones para seleccionar cuadros que agregar option Elementos DOM (ejemplo vivo)

$button.click(function() {
var option = new Option("hello");
$select[0].options.add(option);
});

Quizás eso funcionaría de manera más confiable para usted. (Tenga en cuenta que es "s add, no push. los options objeto en select los elementos no son realmente una matriz)

En lugar de options.add También puedes hacer:

$button.click(function() {
var options = $select[0].options,
option  = new Option("hello");
options[options.length] = option;
});

... que también se suma al final, en forma de matriz. Pero add es confiable navegador cruzado.