Obtenez de l'indice de l'option sélectionnée avec jQuery

Je suis un peu confus sur la façon d'obtenir un indice d'une option sélectionnée à partir d'un code HTML <select> élément.

Sur cette page il y a deux méthodes décrites. Toutefois, les deux sont toujours retourner -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? Est-il une chance que le select n'est pas "prêt" au moment de l'attribution de son change() méthode? En outre, la modification de .index() à .val() est de retour la valeur de droite, c'est donc ce qui me confond encore plus.

  • Une question aussi ancienne, mais le vrai problème est le [name=] utilisés lors de la sélection a id sur elle. Le [0].selectedIndex et option:selected -réponses ci-dessous sont à la fois ok.
InformationsquelleAutor Valentino Ru | 2012-11-26
  1. 310

    La première des méthodes semblent fonctionner dans les navigateurs que j'ai testé, mais les balises d'option n'a pas vraiment d'correspondent à des éléments réels dans tous les navigateurs, de sorte que le résultat peut varier.

    Suffit d'utiliser la selectedIndex propriété de l'élément DOM:

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

    Mise à jour:

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

    alert($("#dropDownMenuKategorie").prop('selectedIndex'));
    • Pourquoi le [0] ?
    • jquery n'a pas selectedIndex de la propriété. L'ajout de [0] convertit l'objet jquery pour un objet javascript qui a le selectedIndex de la propriété. Cet exemple ne fonctionnera pas sans [0]
    • est une propriété, et il n'y a pas d'attribut correspondant. Le attr méthode permet de lire la propriété dans les versions antérieures à la 1.6, mais pas à partir de cette version.
    • Aucune idée du pourquoi de la selectedIndex ne pas repartir de 0 avec la première option?
    • Ensuite, vous faites quelque chose de mal. Le selectedIndex propriété est en partant de zéro. J'ai vérifié la documentation et même essayé moi-même pour être vraiment sûr à 100% sur ce.
    • Merci beaucoup de votre réponse Guffa! Votre message réellement fait quelque chose de sur. J'utilise Select2 et j'ai oublié de compte pour l'espace réservé en se mariant à un tableau. Stupide petite erreur. Merci encore 🙂
    • merci de fournir le prop méthode -- il m'a fait passé un hic, où d'autres "solutions", qui d'ailleurs ne fonctionne pas
    • La réponse par user167517 est le chemin à parcourir puisque vous êtes à l'aide de jquery

    InformationsquelleAutor Guffa
  2. 94

    Bonne façon de résoudre ce problème en Jquery manière

    $("#dropDownMenuKategorie option:selected").index()
    • J'aime que cette réponse ne nécessite pas la [0] de l'OP préféré de réponse et comme un python dev, je peux vraiment apprécier la lisibilité de cette réponse.
    • L'OP déjà essayé. Le code est identique à la première méthode en question.
    InformationsquelleAutor user167517
  3. 18

    J'ai un peu différente de la solution en fonction de la réponse par user167517. Dans ma fonction, je suis en utilisant une variable pour l'id de la zone de sélection, je suis ciblage.

    var vOptionSelect = "#productcodeSelect1";

    L'indice est retourné avec:

    $(vOptionSelect).find(":selected").index();
    InformationsquelleAutor luckychii
  4. 16

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

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

    Cela rend votre code dans le jQuery royaume et évite également une autre option de l'aide d'un sélecteur de trouver l'option sélectionnée. Vous pouvez ensuite restaurer en utilisant la surcharge:

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

    essayer cette

     alert(document.getElementById("dropDownMenuKategorie").selectedIndex);
    • Pas assez de jQuery
    • Ce avec toutes les alertes?
    • C'est la meilleure façon de tester quoi que ce soit! 😉
    • pas de son pas. console.log() va faire mieux
    • facetiousness
    InformationsquelleAutor rajesh kakawat
  6. 6

    selectedIndex est un JavaScript Sélectionnez la Propriété. 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());
  });
});
    InformationsquelleAutor Rishi Kulshreshtha
  7. 2

    Vous pouvez obtenir l'indice de la zone de sélection à l'aide de : .prop() de JQuery

    Vérifier :

    <!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>
    InformationsquelleAutor Niharika Birari