Menús desplegables de AJAX (Selección HTML) en Firefox con jQuery

Question

¡Ayuda!Estoy usando jQuery para realizar una llamada AJAX para completar un menú desplegable dinámicamente dada la entrada anterior del usuario (de otro menú desplegable, que se completa en el lado del servidor).En todos los demás navegadores aparte de Firefox (IE6/7, Opera, Safari), mi llamada de adición en realidad agrega la información debajo de mi opción existente: "Seleccionar una".Pero en Firefox, selecciona automáticamente el último elemento asignado al control de selección, independientemente de si especifico la acción JQuery para .append o para reemplazar (.html()).

<select name="Products" id="Products" onchange="getHeadings(this.value);">
  <option value="">Select Product</option>
</select>    

function getProducts(Category) {
  $.ajax({
    type: "GET",
    url: "getInfo.cfm",
    data: "Action=getProducts&Category=" + Category,
    success: function(result){
      $("#Products").html(result);
    }
  });
};

¿Alguna idea?En el pasado intenté transmitir también otra primera opción en blanco y luego activar una opción de JavaScript para volver a seleccionar el primer índice, pero esto activa el evento onChange en mi código, bastante molesto para el usuario.

---

Actualizar:

Aquí hay un ejemplo de lo que devolvería el script.

<option value="3">Option 1</option>
<option value="4">Option 2</option>
<option value="6">Option 3</option>

Opcionalmente, si uso el método .html() en lugar del .append(), pondría otro

<option value="">Select a Product</option>

en la parte superior del resultado.

---

@Darryl Hein

Aquí hay un ejemplo de lo que devolvería el script.

<option value="3">Option 1</option>
<option value="4">Option 2</option>
<option value="6">Option 3</option>

Opcionalmente, si uso el método .html() en lugar del .append(), pondría otro

<option value="">Select a Product</option>

en la parte superior del resultado.

Answer 1

¿Puedes simplemente cambiar tu función de éxito para restablecer el elemento seleccionado a la primera opción?

$("#Products").append(result).selectedIndex = 0;

¿O configurarlo en la selección anterior?

var tmpIdx = $("#Products").selectedIndex;
$("#Products").append(result).selectedIndex = tmpIdx;

Si el evento onChange no se activa, siempre puede configurar una bandera para indicar que el formulario se está actualizando y los eventos de cambio pueden verificar esa bandera y salir si está configurada.

Answer 2

Simplemente hice lo siguiente y funcionó bien:

<select name="Products" id="Products">
<option value="">Select Product</option>
</select>

<script type="text/javascript">
$('#Products').append('<option value="1">test 1</option><option value="3">test 3</option><option value="3">test 3</option>');
</script>

¿Qué devuelve tu guión?

Answer 3

$('#field').find('option:first').attr('selected', 'selected').parent('select');

Mira, esto funcionará.