it-swarm.com.de

Wie lässt sich die erste Option von <select> mit jQuery auswählen?

Wie mache ich die erste Option, die mit jQuery ausgewählt wurde?

<select id="target">
  <option value="1">...</option>
  <option value="2">...</option>
</select>
487
omg
$("#target").val($("#target option:first").val());
847
David Andres

Sie können es versuchen

$("#target").prop("selectedIndex", 0);
137
Esben
// remove "selected" from any options that might already be selected
$('#target option[selected="selected"]').each(
    function() {
        $(this).removeAttr('selected');
    }
);


// mark the first option as selected
$("#target option:first").attr('selected','selected');
103
user149513

Wenn Sie verwenden

$("#target").val($("#target option:first").val());

dies funktioniert nicht in Chrome und Safari, wenn der erste Optionswert NULL ist.

Ich bevorzuge

$("#target option:first").attr('selected','selected');

weil es in allen Browsern funktionieren kann.

62
Jimmy Huang

Das Ändern des Werts der Select-Eingabe oder das Anpassen des ausgewählten Attributs kann die Standard-Eigenschaft selectedOptions des DOM-Elements überschreiben, was dazu führt, dass ein Element nicht ordnungsgemäß in einem Formular zurückgesetzt wird, in dem das Reset-Ereignis aufgerufen wurde. 

Verwenden Sie die Prop-Methode von jQuery, um die erforderliche Option zu löschen und festzulegen:

$("#target option:selected").prop("selected", false);
$("#target option:first").prop("selected", "selected");
42
James Lee Baker
$("#target")[0].selectedIndex = 0;
31
danactive

Ein subtiler Punkt, von dem ich denke , den ich bei den Antworten mit den höchsten Bewertungen entdeckt habe, ist, dass sie, obwohl sie den ausgewählten Wert korrekt ändern, das betreffende Element nicht aktualisieren Der Benutzer sieht (nur wenn er auf das Widget klickt, wird ein Häkchen neben dem aktualisierten Element angezeigt).

Durch Verketten eines .change () -Aufrufs bis zum Ende wird auch das Widget für die Benutzeroberfläche aktualisiert.

$("#target").val($("#target option:first").val()).change();

(Beachten Sie, dass ich dies bei der Verwendung von jQuery Mobile und einer Box auf dem Chrome -Desktop bemerkt habe, sodass dies möglicherweise nicht überall der Fall ist.).

19
Bradley Bossard

Wenn Sie Optionen deaktiviert haben, können Sie nicht ([deaktiviert]) hinzufügen, um die Auswahl der folgenden Optionen zu verhindern:

$("#target option:not([disabled]):first").attr('selected','selected')
15
Melanie

Eine andere Möglichkeit zum Zurücksetzen der Werte (für mehrere ausgewählte Elemente) könnte die folgende sein:

$("selector").each(function(){

    /*Perform any check and validation if needed for each item */

    /*Use "this" to handle the element in javascript or "$(this)" to handle the element with jquery */

    this.selectedIndex=0;

});
14
$('#newType option:first').prop('selected', true);
8
FFFFFF

So einfach ist das: 

$('#target option:first').prop('selected', true);
7
Ramon Schmidt

Ich habe festgestellt, dass die Einstellung von attr selected nicht funktioniert, wenn bereits ein ausgewähltes Attribut vorhanden ist. Der Code, den ich jetzt verwende, setzt zunächst das ausgewählte Attribut zurück und wählt dann die erste Option aus.

$('#target').removeAttr('selected').find('option:first').attr('selected', 'selected');
6
Francis Lewis

So würde ich es machen:

$("#target option")
    .removeAttr('selected')
    .find(':first')     // You can also use .find('[value=MyVal]')
        .attr('selected','selected');
5
Fabrizio

Obwohl jede Funktion wahrscheinlich nicht notwendig ist ...

$('select').each(function(){
    $(this).find('option:first').prop('selected', 'selected');
});

funktioniert bei mir.

4
Darth Jon

Wenn Sie die erste Option als Standard verwenden möchten, z

<select>
    <option value="">Please select an option below</option>
    ...

dann kannst du einfach verwenden:

$('select').val('');

Es ist schön und einfach.

2
Gary - ITB

Es hat nur für mich funktioniert, wenn ich am Ende einen Auslöser ('change') verwende:

$("#target option:first").attr('selected','selected').trigger('change');
2

Benutzen:

$("#selectbox option:first").val()

Das einfache Arbeiten finden Sie in diesem JSFiddle .

1
Chetan

Auf der Rückseite der Antwort von James Lee Baker ziehe ich diese Lösung vor, da sie die Unterstützung des Browsers aufhebt:.

$('#target').children().prop('selected', false);
$($('#target').children()[0]).prop('selected', 'selected');
1
Matthew Scott

Bei mir hat es nur geklappt, wenn ich folgenden Code hinzugefügt habe:

.change();

Bei mir hat es nur funktioniert, wenn ich den folgenden Code hinzugefügt habe: Da ich das Formular "zurücksetzen" wollte, dh alle ersten Optionen aller ausgewählten Elemente des Formulars auswählen wollte, habe ich den folgenden Code verwendet:

$('form').find('select').each(function(){ $(this).val($("select option:first").val()); $(this).change(); });

1
Jean Douglas

Für mich funktionierte es nur, wenn ich die folgende Codezeile hinzufügte

$('#target').val($('#target').find("option:first").val());
0
Muhammad Qasim

Das hat bei mir funktioniert!

$("#target").prop("selectedIndex", 0);
0
Archana Kamath

Wenn Sie das jQuery-Objekt des select-Elements speichern:

var jQuerySelectObject = $("...");

...

jQuerySelectObject.val(jQuerySelectObject.children().eq(0).val());
0
Daniel

$('select#id').val($('#id option')[index].value)

Ersetzen Sie id durch eine bestimmte Select-Tag-ID und index durch ein bestimmtes Element, das Sie auswählen möchten.

d.h.

<select class="input-field" multiple="multiple" id="ddlState" name="ddlState">
                                        <option value="AB">AB</option>
                                        <option value="AK">AK</option>
                                        <option value="AL">AL</option>
</select>

Also hier für die erste Elementauswahl werde ich folgenden Code verwenden:

$('select#ddlState').val($('#ddlState option')[0].value)
0
Hitesh Kalwani

Sie können jede Option unter dropdown auswählen.

// 'N' can by any number of option.  // e.g.,  N=1 for first option
$("#DropDownId").val($("#DropDownId option:eq(N-1)").val()); 
0
Arsman Ahmad

Überprüfen Sie diesen besten Ansatz mit jQuery mit ECMAScript 6 :

$('select').each((i, item) => {
  var $item = $(item);
  $item.val($item.find('option:first').val()); 
});
0
jdnichollsc
$("#target").val(null);

funktionierte gut in chrom

0
Krishna Murthy