Ottieni l'indice dell'opzione selezionata con jQuery

171

Sono un po 'confuso su come ottenere un indice di un'opzione selezionata da un <select>elemento HTML .

In questa pagina sono descritti due metodi. Tuttavia, entrambi ritornano sempre -1. Ecco il mio codice jQuery:

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

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

Perché questo comportamento? C'è qualche possibilità che selectnon sia "pronto" al momento di assegnare il suo change()metodo? Inoltre, passare .index()a .val()sta restituendo il giusto valore, quindi questo è ciò che mi confonde ancora di più.

— Valentino Ru
fonte

1

Una domanda così vecchia, ma il vero problema è [name=]usato quando la selezione ha idsu di essa. Le risposte [0].selectedIndexe di option:selectedseguito sono entrambe ok.

— Diynevala,

338

I primi metodi sembrano funzionare nei browser che ho testato, ma i tag delle opzioni non corrispondono realmente agli elementi reali in tutti i browser, quindi il risultato può variare.

Basta usare la selectedIndexproprietà dell'elemento DOM:

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

Aggiornare:

Dalla versione 1.6 jQuery ha il propmetodo che può essere usato per leggere le proprietà:

alert($("#dropDownMenuKategorie").prop('selectedIndex'));

— Guffa
fonte

7

Perché il [0]?

— Joan.bdm,

33

@ Joan.bdm jquery non ha selectedIndexproprietà. L'aggiunta [0]converte l'oggetto jquery in un oggetto javascript che ha la selectedIndexproprietà. Questo esempio non funzionerà senza[0]

— Aram,

@JasonL .: selectedIndexè una proprietà e non esiste un attributo corrispondente. Il attrmetodo potrebbe funzionare per leggere la proprietà nelle versioni precedenti alla 1.6, ma non da quella versione.

— Guffa,

@Guffa Qualche idea sul perché selectedIndexnon inizia da 0 con la prima opzione?

— Adam

1

@adamj: Allora stai sbagliando qualcosa. La selectedIndexproprietà è basata su zero. Ho controllato la documentazione e l'ho persino provato da solo per esserne sicuro al 100%.

— Guffa,

95

Un buon modo per risolverlo in maniera Jquery

$("#dropDownMenuKategorie option:selected").index()

— user167517
fonte

2

Mi piace che questa risposta non richieda la [0]risposta preferita di OP e come sviluppatore di Python, posso davvero apprezzare la leggibilità di questa risposta.

— NuclearPeon,

4

L'OP l'ha già provato. Il codice è identico al primo metodo nella domanda.

— Guffa,

18

Ho una soluzione leggermente diversa in base alla risposta dell'utente 167517. Nella mia funzione sto usando una variabile per l'id della casella di selezione che sto prendendo di mira.

var vOptionSelect = "#productcodeSelect1";

L'indice viene restituito con:

$(vOptionSelect).find(":selected").index();

— luckychii
fonte

17

È possibile utilizzare la .prop(propertyName)funzione per ottenere una proprietà dal primo elemento nell'oggetto jQuery.

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

Ciò mantiene il codice all'interno del regno jQuery ed evita anche l'altra opzione di utilizzare un selettore per trovare l'opzione selezionata. È quindi possibile ripristinarlo utilizzando il sovraccarico:

$(selectElement).prop('selectedIndex', savedIndex);

— Nick Bedford
fonte

6

prova questo

 alert(document.getElementById("dropDownMenuKategorie").selectedIndex);

— Rajesh Kakawat
fonte

7

Non abbastanza jQuery

— sohaiby,

1

Cosa c'è con tutti gli avvisi?

— Beanwah,

3

@Beanwah - È il modo migliore per testare qualsiasi cosa! ;)

— JoePC

@JoePC no non lo è. console.log () farà di meglio

@ reiner.luke -;) =

— facetiousness

6

selectedIndex è una proprietà di selezione JavaScript. Per jQuery puoi usare questo codice:

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
fonte

3

È possibile ottenere l'indice della casella di selezione utilizzando: il metodo .prop () di JQuery

Controllare questo :

<!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
fonte