Uzyskaj indeks wybranej opcji za pomocą jQuery

171

Jestem trochę zdezorientowany, jak uzyskać indeks wybranej opcji z <select>elementu HTML .

Na tej stronie opisano dwie metody. Jednak obie zawsze wracają -1. Oto mój kod jQuery:

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

i 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>
(...)

Dlaczego to zachowanie? Czy jest jakaś szansa, że selectnie jest „gotowa” w momencie przypisania swojej change()metody? Dodatkowo zmiana .index()na .val()zwraca właściwą wartość, więc to jeszcze bardziej mnie dezorientuje.

jquery html select indexing Valentino Ru
źródło
1
Takie stare pytanie, ale prawdziwy problem jest [name=]używany, gdy ma idna nim wybór. Odpowiedzi [0].selectedIndexi option:selectedodpowiedzi poniżej są w porządku.
diynevala

Odpowiedzi:

338

Wydaje się, że pierwsze metody działają w przeglądarkach, które testowałem, ale tagi opcji tak naprawdę nie odpowiadają rzeczywistym elementom we wszystkich przeglądarkach, więc wynik może się różnić.

Po prostu użyj selectedIndexwłaściwości elementu DOM:

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

Aktualizacja:

Od wersji 1.6 jQuery ma propmetodę, której można użyć do odczytu właściwości:

alert($("#dropDownMenuKategorie").prop('selectedIndex'));
Guffa
źródło
7
Dlaczego [0]?
Joan.bdm
33
@ Joan.bdm jquery nie ma selectedIndexwłaściwości. Dodanie [0]konwertuje obiekt jquery na obiekt javascript, który ma tę selectedIndexwłaściwość. Ten przykład nie zadziała bez[0]
Aram
@JasonL .: selectedIndexjest właściwością i nie ma odpowiedniego atrybutu. attrMetoda może działać, aby odczytać właściwość w wersjach wcześniejszych niż 1.6, ale nie od tej wersji.
Guffa,
@Guffa Masz jakiś pomysł, dlaczego selectedIndexpierwsza opcja nie zaczyna się od 0?
adamj
1
@adamj: Więc robisz coś nie tak. selectedIndexWłaściwość opiera się zero. Sprawdziłem dokumentację, a nawet spróbowałem sam, aby być naprawdę w 100% pewien.
Guffa
95

Dobry sposób na rozwiązanie tego problemu w jquery

$("#dropDownMenuKategorie option:selected").index()
user167517
źródło
2
Podoba mi się, że ta odpowiedź nie wymaga [0]preferowanej odpowiedzi OP, a jako programista Pythona naprawdę doceniam czytelność tej odpowiedzi.
NuclearPeon
4
OP już tego próbował. Kod jest identyczny z pierwszą metodą w pytaniu.
Guffa
18

Mam trochę inne rozwiązanie na podstawie odpowiedzi użytkownika167517. W mojej funkcji używam zmiennej dla identyfikatora pola wyboru, do którego celuję.

var vOptionSelect = "#productcodeSelect1";

Indeks jest zwracany z:

$(vOptionSelect).find(":selected").index();
luckychii
źródło
17

Możesz użyć .prop(propertyName)funkcji, aby uzyskać właściwość z pierwszego elementu w obiekcie jQuery.

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

Dzięki temu Twój kod pozostaje w dziedzinie jQuery, a także unika się innej opcji użycia selektora w celu znalezienia wybranej opcji. Następnie możesz go przywrócić, używając przeciążenia:

$(selectElement).prop('selectedIndex', savedIndex);
Nick Bedford
źródło
6

Spróbuj tego

 alert(document.getElementById("dropDownMenuKategorie").selectedIndex);
rajesh kakawat
źródło
7
Za mało jQuery
sohaiby
1
O co chodzi z tymi wszystkimi alertami?
Beanwah
3
@Beanwah - to najlepszy sposób na przetestowanie wszystkiego! ;)
JoePC
@JoePC nie, to nie. console.log () będzie działać lepiej
@ reiner.luke -;) = facetiousness
JoePC
6

selectedIndex to właściwość Select JavaScript. W przypadku jQuery możesz użyć tego kodu:

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
źródło
3

Możesz uzyskać indeks pola wyboru używając metody: .prop () JQuery

Sprawdź to :

<!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
źródło