Listes déroulantes AJAX (HTML Select) dans Firefox avec jQuery

Question

Aide!J'utilise jQuery pour effectuer un appel AJAX afin de remplir dynamiquement une liste déroulante en fonction de l'entrée précédente de l'utilisateur (à partir d'une autre liste déroulante, remplie côté serveur).Dans tous les autres navigateurs à l'exception de Firefox (IE6/7, Opera, Safari), mon appel d'ajout ajoute en fait les informations sous mon option existante - "Sélectionner un".Mais dans Firefox, il sélectionne automatiquement le dernier élément donné au contrôle de sélection, que je spécifie l'action JQuery à .append ou à remplacer (.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);
    }
  });
};

Des pensées?J'ai essayé dans le passé de transmettre également une autre première option vide, puis de déclencher une option JavaScript pour resélectionner le premier index, mais cela déclenche l'événement onChange dans mon code, plutôt ennuyeux pour l'utilisateur.

---

Mise à jour:

Voici un exemple de ce que le script renverrait

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

En option, si j'utilise la méthode .html() au lieu de .append(), je mettrais un autre

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

en haut du résultat.

---

@Darryl Hein

Voici un exemple de ce que le script renverrait

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

En option, si j'utilise la méthode .html() au lieu de .append(), je mettrais un autre

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

en haut du résultat.

Answer 1

Pouvez-vous simplement modifier votre fonction de réussite pour réinitialiser l'élément sélectionné à la première option ?

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

ou pour le remettre à la sélection précédente ?

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

Si l'événement onChange ne doit pas se déclencher, vous pouvez toujours définir un indicateur pour indiquer que le formulaire est en cours de mise à jour et les événements de modification peuvent vérifier cet indicateur et quitter s'il est défini.

Answer 2

Je viens de faire ce qui suit et cela a bien fonctionné :

<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>

Que renvoie votre script ?

Answer 3

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

tu vois, ça fonctionnera