Ändern mit jQuery Auswahl zeigt keine ausgewählte Option

Question

Ich habe Formular mit ein paar Auswahlfelder und einige Eingabefelder ausgeblendet. Klicken Sie auf die Schaltfläche sollte das Formular anzeigen und einige Werte in den Feldern festlegen. Die Eingabefelder sind mit vorgegebenen Werten gefüllt, aber ich habe ein Problem mit ausgewählten Feldern.

Mit diesem Code:

$("#form select[name=user]").val(value); 

Option mit diesem Wert wird Attribut "ausgewählt" (markiert in Firebug), aber Auswahlfeld zeigt immer noch "Wählen" (initial) Option.

Ich habe versucht, Fokus und Unschärfe nach der Einstellung Wert, aber das hat auch nicht funktioniert.

Irgendwelche Vorschläge?

---

Das ist so ziemlich die Standardform:

<form action="#" id="form" class="fix"> 
<div class="holder"> 
    <label>User:</label> 
    <select name="user" class="styled"> 
     <option value="0" selected>Choose</option> 
     <option value="1">User 1</option> 
     <option value="2">User 2</option> 
     </select> 
    </div> 
</form> 

Und durch den Aufruf von jQuery-Anweisung:

$("#form select[name=user]").val('2'); 
$("#form").show(); 

ich dies in Firebug erhalten:

<form action="#" id="form" class="fix" style="display:none"> 
<div class="holder"> 
    <label>User:</label> 
    <select name="user" class="styled"> 
     <option value="0">Choose</option> 
     <option value="1">User 1</option> 
     <option value="2" selected>User 2</option> 
     </select> 
    </div> 
</form> 

aber die text is select bleibt "Wählen". Wenn ich ein Formular einreiche, wird der Wert korrekt übergeben.

Wenn ich das Formular zurücksetze und eine Option wähle, wird der Text der ausgewählten Option richtig angezeigt. Das ist komisch für mich.

Answer 1

die '#form select[name=user]' versucht, ein <select name="user"> Element zu wählen, dass das Kind eines Elements mit der ID von "Form" ist ... zB:

<div id="form"> 
    <select name="user"> // This element 

Ich glaube, Sie wollen folgendes:

$("form select[name=user]").val(value); 

, die jetzt ein <select name="user"> Element, das das Kind einer Form, zB wählen sollten:

<form> 
    <select name="user"> //This element 

Answer 2

Ich habe eine Lösung gefunden. Ich habe vergessen, Change Event für aufzurufen. Ich wusste nicht, dass jQuery es nicht automatisch macht. Also der Code für die Lösung lautet:

$("form select[name=user]").val(value).change(); 

Answer 3

Ich hatte das gleiche Problem. Unter http://api.jquery.com/attr/ gibt es einige Hinweise zur .prop() -Methode statt .attr(). Wie Jovicas Antwort erscheint auch die geänderte Option nur in Firefox (20.0 ist meine Version), wenn wir am Ende die Methode .change() verwenden.

Answer 4

Ich hatte das gleiche Problem mit Drop-Down-HTML-Tag. Und habe die Lösung. Was ich während der Verwendung von .change(), .attr() und .prop() analysiere, wird unten geteilt.

1. .change(): Als ich noch .change() nicht funktioniert in meinem Fall, so ist es nicht zuverlässig ist. Auch Browser Version Problem.
2. .attr(): Wenn ich .attr() Methode/Funktion verwendet, für zB. $('#db_service option[value=1]').attr('selected', 'selected'); Analyse: Es Attribut der select-Tag-Option auf ausgewählt = ausgewählt, wenn ich Quellcode sah. Aber auf dem Bildschirm erscheinen Änderungen nicht.
3. .prop(): Wenn ich .prop() Methode/Funktion, für zB. $('#db_service option[value=1]').prop('selected', 'selected'); Analyse: Es WONT Attribut der Option select-Tag zu selected = ausgewählt, wenn ich Quellcode sah. Aber auf dem Bildschirm sind Änderungen ERSCHEINT.

Meine Lösung: sowohl .attr Gebraucht() und .prop() für weitere perfektes Ergebnis

$('#db_service option[value=1]').attr('selected', 'selected'); $('#db_service option[value=1]').prop('selected', 'selected');