Obter índice da opção selecionada com jQuery

171

Estou um pouco confuso sobre como obter um índice de uma opção selecionada de um <select>item HTML .

Por esta página, há dois métodos descritos. No entanto, ambos estão sempre retornando -1. Aqui está o meu código jQuery:

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

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

Por que esse comportamento? Existe alguma chance de que o selectitem não esteja "pronto" no momento de atribuir seu change()método? Além disso, mudar .index()para .val()está retornando o valor certo, e é isso que me confunde ainda mais.

jquery html select indexing Valentino Ru
fonte
1
Uma pergunta tão antiga, mas o problema real é o [name=]usado quando o select contém id. As respostas [0].selectedIndexe option:selectedabaixo estão ok.
Diynevala 18/05

Respostas:

338

Os primeiros métodos parecem funcionar nos navegadores que testei, mas as tags de opção realmente não correspondem aos elementos reais em todos os navegadores; portanto, o resultado pode variar.

Basta usar a selectedIndexpropriedade do elemento DOM:

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

Atualizar:

Desde a versão 1.6, o jQuery possui o propmétodo que pode ser usado para ler propriedades:

alert($("#dropDownMenuKategorie").prop('selectedIndex'));
Guffa
fonte
7
Por que o [0]?
Joana.bdm
33
@ Joan.bdm jquery não tem selectedIndexpropriedade. A adição [0]converte o objeto jquery em um objeto javascript que possui a selectedIndexpropriedade Este exemplo não funcionará sem[0]
Aram
@JasonL .: selectedIndexé uma propriedade e não há atributo correspondente. O attrmétodo pode funcionar para ler a propriedade em versões anteriores à 1.6, mas não dessa versão.
Guffa
@ Guffa Alguma idéia de por que o selectedIndexnão começa de 0 com a primeira opção?
adamj
1
@ adamj: Então você está fazendo algo errado. A selectedIndexpropriedade é baseada em zero. Verifiquei a documentação e até tentei ter 100% de certeza sobre isso.
Guffa 26/03
95

Boa maneira de resolver isso da maneira Jquery

$("#dropDownMenuKategorie option:selected").index()
user167517
fonte
2
Eu gosto que esta resposta não exija a [0]resposta preferida do OP e, como desenvolvedor python, eu realmente aprecio a legibilidade dessa resposta.
NuclearPeon
4
O OP já tentou isso. O código é idêntico ao primeiro método da pergunta.
Guffa
18

Eu tenho uma solução ligeiramente diferente com base na resposta do usuário167517. Na minha função, estou usando uma variável para o ID da caixa de seleção que estou segmentando.

var vOptionSelect = "#productcodeSelect1";

O índice é retornado com:

$(vOptionSelect).find(":selected").index();
luckychii
fonte
17

Você pode usar a .prop(propertyName)função para obter uma propriedade do primeiro elemento no objeto jQuery.

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

Isso mantém seu código dentro do domínio jQuery e também evita a outra opção de usar um seletor para encontrar a opção selecionada. Você pode restaurá-lo usando a sobrecarga:

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

tente isso

 alert(document.getElementById("dropDownMenuKategorie").selectedIndex);
rajesh kakawat
fonte
7
Não é suficiente jQuery
sohaiby
1
O que há com todos os alertas?
precisa saber é o seguinte
3
@Beanwah - É a melhor maneira de testar qualquer coisa! ;)
JoePC
@ JoePC não, não é. O console.log () fará melhor
@ reiner.luke -;) = facetiousness
JoePC
6

selectedIndex é uma propriedade de seleção JavaScript. Para jQuery, você pode usar este código:

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

Você pode obter o índice da caixa de seleção usando o método: .prop () do JQuery

Verifique isto:

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