Obtenir l'index de l'option sélectionnée avec jQuery

171

Je ne sais pas comment obtenir un index d'une option sélectionnée à partir d'un <select>élément HTML .

Sur cette page, deux méthodes sont décrites. Cependant, les deux reviennent toujours -1. Voici mon code jQuery:

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

et en 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>
(...)

Pourquoi ce comportement? Y a-t-il une chance que le selectne soit pas «prêt» au moment d'attribuer sa change()méthode? De plus, passer .index()à .val()revient à la bonne valeur, c'est donc ce qui me trouble encore plus.

— Valentino Ru
source

1

Une telle question ancienne, mais le vrai problème est le [name=]utilisé lorsque select a iddessus. Le [0].selectedIndexet option:selected-answers ci - dessous sont tous les deux ok.

— diynevala

338

Les premières méthodes semblent fonctionner dans les navigateurs que j'ai testés, mais les balises d'option ne correspondent pas vraiment aux éléments réels de tous les navigateurs, le résultat peut donc varier.

Utilisez simplement la selectedIndexpropriété de l'élément DOM:

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

Mettre à jour:

Depuis la version 1.6 jQuery a la propméthode qui peut être utilisée pour lire les propriétés:

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

— Guffa
source

7

Pourquoi le [0]?

— Joan.bdm

33

@ Joan.bdm jquery n'a pas de selectedIndexpropriété. L'ajout [0]convertit l'objet jquery en un objet javascript qui a la selectedIndexpropriété. Cet exemple ne fonctionnera pas sans[0]

— Aram

@JasonL .: selectedIndexest une propriété, et il n'y a pas d'attribut correspondant. La attrméthode peut fonctionner pour lire la propriété dans les versions antérieures à 1.6, mais pas à partir de cette version.

— Guffa

@Guffa Une idée de pourquoi le selectedIndexne démarre pas à 0 avec la première option?

— adamj

1

@adamj: Alors vous faites quelque chose de mal. La selectedIndexpropriété est basée sur zéro. J'ai vérifié la documentation et même essayé moi-même pour être vraiment sûr à 100% de cela.

— Guffa

95

Bon moyen de résoudre cela de manière Jquery

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

— user167517
source

2

J'aime le fait que cette réponse ne nécessite pas la [0]réponse préférée de OP et en tant que développeur python, je peux vraiment apprécier la lisibilité de cette réponse.

— NuclearPeon

4

L'OP a déjà essayé cela. Le code est identique à la première méthode de la question.

— Guffa

18

J'ai une solution légèrement différente basée sur la réponse de user167517. Dans ma fonction, j'utilise une variable pour l'identifiant de la boîte de sélection que je cible.

var vOptionSelect = "#productcodeSelect1";

L'index est renvoyé avec:

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

— luckyychii
source

17

Vous pouvez utiliser la .prop(propertyName)fonction pour obtenir une propriété du premier élément de l'objet jQuery.

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

Cela garde votre code dans le domaine jQuery et évite également l'autre option d'utiliser un sélecteur pour trouver l'option sélectionnée. Vous pouvez ensuite le restaurer en utilisant la surcharge:

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

— Nick Bedford
source

6

essaye ça

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

— Rajesh kakawat
source

7

Pas assez jQuery

— sohaiby

1

Qu'est-ce que toutes les alertes?

— Beanwah

3

@Beanwah - C'est la meilleure façon de tester quoi que ce soit! ;)

— JoePC

@JoePC non ce n'est pas. console.log () fera mieux

@ reiner.luke -;) =

— facetiousness

6

selectedIndex est une propriété de sélection JavaScript. Pour jQuery, vous pouvez utiliser ce code:

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
source

3

Vous pouvez obtenir l'index de la boîte de sélection en utilisant: la méthode .prop () de JQuery

Vérifie ça :

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