web-dev-qa-db-fra.com

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

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

Sur la page this , deux méthodes sont décrites. Cependant, les deux retournent 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? Existe-t-il une chance que la select ne soit pas "prête" au moment de l'attribution de sa méthode change()? De plus, changer .index() en .val() renvoie la bonne valeur, ce qui me rend encore plus confus.

jqueryhtmlselectindexing
156
Valentino Ru

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

Utilisez simplement la propriété selectedIndex de l'élément DOM:

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

Mise à jour:

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

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

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

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

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 retourné avec:

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

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

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

Cela conserve votre code dans le domaine jQuery et évite également l’utilisation d’un sélecteur pour rechercher l’option sélectionnée. Vous pouvez ensuite le restaurer en utilisant la surcharge:

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

selectedIndex est une propriété JavaScript Select. 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());
  });
});
6
Rishi Kulshreshtha

essaye ça

 alert(document.getElementById("dropDownMenuKategorie").selectedIndex);
6
rajesh kakawat

Vous pouvez obtenir l'index de la zone 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>
2
Niharika Birari