Obtenga el índice de la opción seleccionada con jQuery

171

Estoy un poco confundido acerca de cómo obtener un índice de una opción seleccionada de un <select>elemento HTML .

En esta página hay dos métodos descritos. Sin embargo, ambos siempre regresan -1. Aquí está mi código jQuery:

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

y 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>
(...)

¿Por qué este comportamiento? ¿Hay alguna posibilidad de que selectno esté "listo" en el momento de asignar su change()método? Además, cambiar .index()a .val()es devolver el valor correcto, así que eso es lo que me confunde aún más.

— Valentino Ru
fuente

1

Una pregunta tan antigua, pero el verdadero problema es [name=]cuando se usa select id. Las respuestas [0].selectedIndexy option:selectedabajo están bien.

— Diynevala

338

Los primeros métodos parecen funcionar en los navegadores que probé, pero las etiquetas de opción realmente no corresponden a elementos reales en todos los navegadores, por lo que el resultado puede variar.

Simplemente use la selectedIndexpropiedad del elemento DOM:

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

Actualizar:

Desde la versión 1.6 jQuery tiene el propmétodo que puede usarse para leer propiedades:

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

— Guffa
fuente

77

¿Por qué el [0]?

— Joan.bdm

33

@ Joan.bdm jquery no tiene selectedIndexpropiedad. Agregar [0]convierte el objeto jquery en un objeto javascript que tenga la selectedIndexpropiedad. Este ejemplo no funcionará sin[0]

— Siria

@JasonL .: selectedIndexes una propiedad y no hay un atributo correspondiente. El attrmétodo podría funcionar para leer la propiedad en versiones anteriores a 1.6, pero no desde esa versión.

— Guffa

@Guffa ¿Alguna idea de por qué el selectedIndexno comienza desde 0 con la primera opción?

— adamj

1

@adamj: Entonces estás haciendo algo mal. La selectedIndexpropiedad está basada en cero. Revisé la documentación e incluso lo intenté yo mismo para estar realmente 100% seguro de esto.

— Guffa

95

Buena manera de resolver esto de manera Jquery

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

— usuario167517
fuente

2

Me gusta que esta respuesta no requiera la [0]respuesta preferida de OP y, como desarrollador de Python, realmente puedo apreciar la legibilidad de esta respuesta.

— NuclearPeon

44

El OP ya lo intentó. El código es idéntico al primer método en la pregunta.

— Guffa

18

Tengo una solución ligeramente diferente basada en la respuesta del usuario167517. En mi función, estoy usando una variable para la identificación del cuadro de selección al que estoy apuntando.

var vOptionSelect = "#productcodeSelect1";

El índice se devuelve con:

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

— luckychii
fuente

17

Puede usar la .prop(propertyName)función para obtener una propiedad del primer elemento en el objeto jQuery.

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

Esto mantiene su código dentro del reino jQuery y también evita la otra opción de usar un selector para encontrar la opción seleccionada. Luego puede restaurarlo utilizando la sobrecarga:

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

— Nick Bedford
fuente

6

prueba esto

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

— rajesh kakawat
fuente

77

No es suficiente jQuery

— sohaiby

1

¿Qué pasa con todas las alertas?

— Beanwah

3

@Beanwah: ¡es la mejor manera de probar cualquier cosa! ;)

— JoePC

@JoePC no, no lo es. console.log () funcionará mejor

@ reiner.luke -;) =

— bromas

6

selectedIndex es una propiedad de selección de JavaScript. Para jQuery puedes 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
fuente

3

Puede obtener el índice del cuadro de selección utilizando: método .prop () de JQuery

Mira esto :

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