Ruft den Index der ausgewählten Option mit jQuery ab

171

Ich bin ein bisschen verwirrt darüber, wie man einen Index einer ausgewählten Option aus einem HTML- <select>Element erhält .

Auf dieser Seite werden zwei Methoden beschrieben. Beide kehren jedoch immer wieder zurück -1. Hier ist mein jQuery-Code:

$(document).ready(function(){
    $("#dropDownMenuKategorie").change(function(){
        alert($("#dropDownMenuKategorie option:selected").index());
        alert($("select[name='dropDownMenuKategorie'] option:selected").index());
    });
});

und in HTML

(...)
<select id="dropDownMenuKategorie">
    <option value="gastronomie">Gastronomie</option>
    <option value="finanzen">Finanzen</option>
    <option value="lebensmittel">Lebensmittel</option>
    <option value="gewerbe">Gewerbe</option>
    <option value="shopping">Shopping</option>
    <option value="bildung">Bildung</option>
</select>
(...)

Warum dieses Verhalten? Gibt es eine Chance, dass der selectzum Zeitpunkt der Zuweisung seiner change()Methode nicht "bereit" ist ? Darüber hinaus gibt der Wechsel .index()zu .val()den richtigen Wert zurück, was mich noch mehr verwirrt.

jquery html select indexing Valentino Ru
quelle
1
Solch eine alte Frage, aber das eigentliche Problem ist die, die [name=]verwendet wird, wenn select darauf steht id. Die [0].selectedIndexund option:selected-Antworten unten sind beide in Ordnung.
Diynevala

Antworten:

338

Die ersten Methoden scheinen in den von mir getesteten Browsern zu funktionieren, aber die Options-Tags entsprechen nicht wirklich den tatsächlichen Elementen in allen Browsern, sodass das Ergebnis variieren kann.

Verwenden Sie einfach die selectedIndexEigenschaft des DOM-Elements:

alert($("#dropDownMenuKategorie")[0].selectedIndex);

Aktualisieren:

Seit Version 1.6 verfügt jQuery über die propMethode, mit der Eigenschaften gelesen werden können:

alert($("#dropDownMenuKategorie").prop('selectedIndex'));
Guffa
quelle
7
Warum das [0]?
Joan.bdm
33
@ Joan.bdm jquery hat kein selectedIndexEigentum. Durch Hinzufügen [0]wird das jquery-Objekt in ein Javascript-Objekt konvertiert, das die selectedIndexEigenschaft hat. Dieses Beispiel funktioniert nicht ohne[0]
Aram
@JasonL.: Ist selectedIndexeine Eigenschaft und es gibt kein entsprechendes Attribut. Die attrMethode funktioniert möglicherweise, um die Eigenschaft in früheren Versionen als 1.6 zu lesen, jedoch nicht in dieser Version.
Guffa
@Guffa Irgendeine Idee, warum das selectedIndexbei der ersten Option nicht bei 0 beginnt?
Adamj
1
@adamj: Dann machst du etwas falsch. Die selectedIndexEigenschaft basiert auf Null. Ich habe die Dokumentation überprüft und es sogar selbst versucht, um wirklich 100% sicher zu sein.
Guffa
95

Guter Weg, um dies auf Jquery-Weise zu lösen

$("#dropDownMenuKategorie option:selected").index()
user167517
quelle
2
Ich finde es gut, dass diese Antwort nicht die [0]von OP bevorzugte Antwort erfordert , und als Python-Entwickler kann ich die Lesbarkeit dieser Antwort wirklich schätzen.
NuclearPeon
4
Das hat das OP schon versucht. Der Code ist identisch mit der ersten Methode in der Frage.
Guffa
18

Ich habe eine etwas andere Lösung basierend auf der Antwort von user167517. In meiner Funktion verwende ich eine Variable für die ID des Auswahlfelds, auf das ich abziele.

var vOptionSelect = "#productcodeSelect1";

Der Index wird zurückgegeben mit:

$(vOptionSelect).find(":selected").index();
Luckychii
quelle
17

Mit der .prop(propertyName)Funktion können Sie eine Eigenschaft aus dem ersten Element im jQuery-Objekt abrufen.

var savedIndex = $(selectElement).prop('selectedIndex');

Dies hält Ihren Code im jQuery-Bereich und vermeidet auch die andere Option, einen Selektor zu verwenden, um die ausgewählte Option zu finden. Sie können es dann mithilfe der Überladung wiederherstellen:

$(selectElement).prop('selectedIndex', savedIndex);
Nick Bedford
quelle
6

Versuche dies

 alert(document.getElementById("dropDownMenuKategorie").selectedIndex);
Rajesh Kakawat
quelle
7
Nicht genug jQuery
Sohaiby
1
Was ist mit all den Warnungen?
Beanwah
3
@Beanwah - Es ist der beste Weg, etwas zu testen! ;)
JoePC
@ JoePC nein es ist nicht. console.log () wird es besser machen
@ reiner.luke -;) =
Scherzhaftigkeit
6

selectedIndex ist eine JavaScript Select-Eigenschaft. Für jQuery können Sie diesen Code verwenden:

jQuery(document).ready(function($) {
  $("#dropDownMenuKategorie").change(function() {
    // I personally prefer using console.log(), but if you want you can still go with the alert().
    console.log($(this).children('option:selected').index());
  });
});
Rishi Kulshreshtha
quelle
3

Sie können den Index des Auswahlfelds mithilfe der .prop () -Methode von JQuery abrufen

Überprüfen Sie dies :

<!doctype html>
<html>
<head>
<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

});

function check(){
    alert($("#NumberSelector").prop('selectedIndex'));
    alert(document.getElementById("NumberSelector").value);
}
</script>
</head>

<body bgcolor="yellow">
<div>
<select id="NumberSelector" onchange="check()">
    <option value="Its Zero">Zero</option>
    <option value="Its One">One</option>
    <option value="Its Two">Two</option>
    <option value="Its Three">Three</option>
    <option value="Its Four">Four</option>
    <option value="Its Five">Five</option>
    <option value="Its Six">Six</option>
    <option value="Its Seven">Seven</option>
</select>
</div>
</body>
</html>
Niharika Birari
quelle