web-dev-qa-db-fra.com

Comment obtenir l'index de select-> option tag

<select id="sel">
<option value="123" selected="selected">text1</option>
<option value="44">text2</option>
<option value="882">text3</option>
...
</select>

Comment obtenir l'index de l'option sélectionnée avec jQuery? Peut-être .index(subject), mais toutes les possibilités testées, n'ont pas fonctionné ...

P.S. Index: value = "123" => 0, value = "44" => 1, ...

Merci

jqueryindexing
18
Vov4ik

Cela va le faire:

   $("#sel").attr("selectedIndex")
3
Steve Kemp

Seule la deuxième réponse de Bob est correcte:

$("#sel")[0].selectedIndex

Travaux: http://jsfiddle.net/b9chris/wxeVN/1/

L'utilisation de .attr() ne fonctionne que si l'utilisateur (ou la restauration DOM du navigateur) n'a pas modifié l'option sélectionnée depuis le chargement de la page: http://jsfiddle.net/b9chris/wxeVN/

Vous pouvez l'implémenter en tant qu'extension jQuery et obtenir un peu plus d'informations dans le processus:

(function($) {
    $.fn.selectedOption = function() {
        var sel = this[0];
        return sel.options[sel.selectedIndex];
    };
})(jQuery)

$('button').click(function() {
    $('#output').text('selected index: ' + $('select').selectedOption().index);
});

http://jsfiddle.net/b9chris/wxeVN/102/

Ce qui est retourné par .selectedOption() correspond à la balise d’option réelle. Vous pouvez donc accéder à .index, .value et .text - un peu plus pratique que l’index utilisé habituellement.

17
Chris Moschini

Au moment où j'écris ces lignes, deux des principales réponses (y compris la réponse acceptée) sont incorrectes bien qu'elles aient été signalées il y a près de cinq ans. attr("selectedIndex") ne fait rien car selectedIndex est une propriété de l'élément DOM actuel, pas un attribut HTML. Vous devez utiliser prop:

$(this).prop('selectedIndex')

Démo interactive comparant ceci à la version incorrecte: http://jsfiddle.net/uvwkD/

10
Justin Morgan
$("#sel").attr("selectedIndex")

ou

$("#sel")[0] //to get the DOM element
$("#sel")[0].selectedIndex
5
Bob

Vous pouvez obtenir l'index de l'élément dans ce cas en vérifiant le nombre d'éléments frères que l'élément sélectionné a devant lui:

$('#sel option:selected').prevAll().length;
2
antti_s

Vous pouvez réellement le faire sans jQuery: var sel = document.getElementById( 'sel' ); var index = sel.selectedIndex;

2
Jacob Relkin

Utilisez la fonction d'index standard de jquery comme dans cet exemple de code

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

1
user167517

Le titre ne correspond pas vraiment à la question ...

Comment obtenir l'index de select-> option tag

option.index // javascript

$(option).prop('index') // jquery

index of selected select-> option tag:

document.getElementById('sel').selectedIndex // javascript
0
user1566694