Legen Sie den ausgewählten Index eines Dropdowns mit jQuery fest

165

Wie lege ich den Index eines Dropdowns in jQuery fest, wenn ich das Steuerelement wie folgt finde:

$("*[id$='" + originalId + "']")

Ich mache das auf diese Weise, weil ich Steuerelemente dynamisch erstelle und da die IDs bei der Verwendung von Web Forms geändert werden. Ich habe dies als Problemumgehung gefunden, um einige Steuerelemente zu finden. Sobald ich das jQuery-Objekt habe, weiß ich nicht, wie ich den ausgewählten Index auf 0 (Null) setzen soll.

jquery

— oz.
quelle

352

Zuallererst - dieser Selektor ist ziemlich langsam. Es durchsucht jedes DOM-Element nach den IDs. Es ist weniger ein Leistungstreffer, wenn Sie dem Element eine Klasse zuweisen können.

$(".myselect")

Um Ihre Frage zu beantworten, gibt es verschiedene Möglichkeiten, den Wert für ausgewählte Elemente in jQuery zu ändern

// sets selected index of a select box to the option with the value "0"
$("select#elem").val('0'); 

// sets selected index of a select box to the option with the value ""
$("select#elem").val(''); 

// sets selected index to first item using the DOM
$("select#elem")[0].selectedIndex = 0;

// sets selected index to first item using jQuery (can work on multiple elements)
$("select#elem").prop('selectedIndex', 0);

— Zwerg
quelle

Gibt es einen besseren Weg, dies zu tun? Ich dachte, es würde das gesamte DOM scannen, um mit der ID übereinzustimmen, aber da ich neu bei jQuery bin, dachte ich, lass es funktionieren und dann sehen, ob es einen besseren Weg gibt, dies zu tun. Jeder Rat wird geschätzt.

— Unze.

Ja - wenn Sie den zu suchenden Elementen eine Klasse zuweisen können, ist dies eine viel schnellere Auswahl.

— Gnarf

@gnarf sind IDs nicht schneller?

— KBN

#an-idist schneller, aber *[id$=ends-with]viel langsamer, das bedeutet "dem Element eine Klasse zuweisen"

— Gnarf

Wie wäre es, wenn ich mehrere ASP.net DropDownList mit unterschiedlich ausgewählten Indexwerten habe?

— SearchForKnowledge

106

Ich habe es gerade gefunden, es funktioniert für mich und ich persönlich finde es leichter zu lesen.

Dadurch wird der tatsächliche Index genau wie bei der Antwortnummer 3 von Gnarf festgelegt.

// sets selected index of a select box the actual index of 0 
$("select#elem").attr('selectedIndex', 0);

Das hat früher nicht funktioniert, funktioniert aber jetzt ... siehe Fehler: http://dev.jquery.com/ticket/1474

Nachtrag

Wie in den Kommentaren empfohlen, verwenden Sie:

$("select#elem").prop('selectedIndex', 0);

— 4imble
quelle

30

Und ab jQuery 1.6 sollten Sie .prop('selectedIndex', 0);unabhängig davon verwenden, ob es .attr()funktioniert oder nicht :)

— Gnarf

1

Richtig, es könnte tatsächlich nicht in 1.7 funktionieren. Siehe akzeptierte Antwort: stackoverflow.com/questions/8010664/…

— 4imble

+1 für den Nachtrag. Mein alter Code wurde aufgrund dieses Problems

— beschädigt

11

Ich schreibe diese Antwort im Jahr 2015 und aus irgendeinem Grund (wahrscheinlich ältere Versionen von jQuery) hat keine der anderen Antworten für mich funktioniert. Ich meine, sie ändern den ausgewählten Index, aber er spiegelt nicht das tatsächliche Dropdown wider.

Hier ist eine andere Möglichkeit, den Index zu ändern und ihn tatsächlich in der Dropdown-Liste wiederzugeben:

$('#mydropdown').val('first').change();

— PaulG
quelle

1

Danke für deine Antwort. Nur diese Antwort funktioniert für mich

— Viraj Dhamal

Auch im Jahr 2015 habe ich kein Problem damit, prop('selectedIndex', ...);die Auswahl zu ändern (getestet mit Chrome & Firefox).

— Lambart

2

Für das, was es wert ist, sollte darauf hingewiesen werden, dass Sie hier etwas anderes tun, indem Sie ein changeEreignis in der Dropdown-Liste auslösen , das auch eine nützliche Lösung für Benutzer sein kann, die die Auswahl durch Aufrufen ändern prop('selectedIndex', ...), anstatt val(...). Vielleicht war das Problem, dass Sie auf eine changeVeranstaltung hören und DAS hat bei Ihnen nicht funktioniert? Es ist wahr, dass das einfache Ändern der propEigenschaft keine Ereignisse auslösen wird ...

— Lambart

9

Ich benutze

$('#elem').val('xyz');

um das Optionselement mit dem Wert = 'xyz' auszuwählen

— djs
quelle

9

JQuery-Code:

$("#sel_status").prop('selectedIndex',1);

Jsp Code:

Status:
<select name="sel_status"
    id="sel_status">
    <option value="1">-Status-</option>
    <option>ALL</option>
    <option>SENT</option>
    <option>RECEIVED</option>
    <option>DEACTIVE</option>
</select>

— Sathya
quelle

3

Sie möchten den Wert der ersten Option im Auswahlelement abrufen.

$("*[id$='" + originalId + "']").val($("*[id$='" + originalId + "'] option:first").attr('value'));

— MacAnthony
quelle

3

Auswahl der 2. Option

$('#your-select-box-id :nth-child(2)').prop('selected', true);

Hier fügen wir den Trigger ('change') hinzu, um das Ereignis auszulösen.

$('#your-select-box-id :nth-child(2)').prop('selected', true).trigger('change');

— Jarrod
quelle

Das ist eine viel bessere Antwort.

— Ben Dehghan

1

$("[id$='" + originalId + "']").val("0 index value");

setzt es auf 0

— Josh Mein
quelle

1

Wählen Sie die 4. Option

$('#select').val($('#select option').eq(3).val());

Beispiel auf jsfiddle

— Dabar
quelle

2

gültige Lösung ... für einen Code-Verschleierungswettbewerb! :)

— Lambart