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.

— 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

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