AJAX Dropdowns (HTML Select) in Firefox mit JQuery

Question

Hilfe! Ich benutze JQuery, um einen AJAX-Aufruf zu machen, um ein Drop-down dynamisch zu füllen, wenn die vorherige Eingabe des Benutzers erfolgt (aus einem anderen Dropdown-Feld, das serverseitig gefüllt ist). In allen anderen Browsern neben Firefox (IE6/7, Opera, Safari) hängt mein Append-Aufruf die Informationen unterhalb meiner bestehenden Option an - "Select An". Aber in Firefox wählt es automatisch das letzte Element aus, das dem ausgewählten Steuerelement zugewiesen wurde, unabhängig davon, ob ich die JQuery-Aktion für .append oder für (.html()) angeben möchte.

<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); 
       } 
      }); 
    }; 

Irgendwelche Gedanken? Ich habe in der Vergangenheit versucht, auch eine andere leere erste Option zu übertragen, und dann eine JavaScript-Option auslösen, um den ersten Index wieder auszuwählen, aber dies löst das Ereignis OnChange in meinem Code, eher für den Benutzer ärgerlich.

---

Update:

Hier ist ein Beispiel dafür, was das Skript zurückgeben würde

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

Optional wenn die .html() -Methode anstelle des .append(), würde ich setzen ein weiterer

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

an der Spitze des Ergebnisses.

---

@Darryl Hein

Hier ist ein Beispiel dafür, was das Skript

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

Optional zurückkehren würde, wenn die .html() -Methode anstelle des .append() verwenden, würde ich Setzen Sie einen anderen

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

an der Spitze des Ergebnisses.

Answer 1

Können Sie einfach Ihre Erfolgsfunktion ändern, um das ausgewählte Element auf die erste Option zurückzusetzen?

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

oder um es auf die vorherige Auswahl zu setzen?

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

Wenn das onChange Ereignis dann nicht schießen sollten Sie immer ein Flag gesetzt, um anzuzeigen, dass das Formular aktualisiert und Änderungsereignisse können für diese Flagge und Ausfahrt überprüfen, ob es gesetzt ist.

Answer 2

Wie wäre es, die Option "An ... wählen" zuletzt zu senden?

Answer 3

Ich habe gerade die folgende und es funktionierte gut:

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

Was Rückkehr Ihr Skript?

Answer 4

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

sehen diese

arbeiten