Contando el número de etiquetas de opción en una etiqueta de selección en jQuery

159

¿Cómo cuento el número de <option>s en un <select>elemento DOM usando jQuery?

<select data-attr="dropdown" id="input1">
  <option value="Male" id="Male">Male</option>
  <option value="Female" id="Female">Female</option>
</select>

Quiero encontrar el número de <option>etiquetas en el <select>elemento DOM, ya que con eso quiero abrir el panel de configuración con ese número de campos de entrada con el valor de opción correspondiente del cuadro desplegable y cambiarlo nuevamente en la vista previa panel.

El cuadro desplegable anterior está en mi panel de vista previa que es generado por jQuery.

Misericordia
fuente

Respuestas:

263
$('#input1 option').length;

Esto producirá 2.

ruiseñor2k1
fuente
51

La solución W3C:

var len = document.getElementById("input1").length;
karim79
fuente
55
Una variación de este método con javascript moderno será var len = document.querySelector("#input1").length;
Jacob Nelson
22

Puede usar cualquiera de las propiedades de longitud y lengthes mejor rendimiento entonces size.

$('#input1 option').length;

O puede usar la función de tamaño como

$('#input1 option').size(); 

Manifestación

Sadikhasan
fuente
2
Esto no proporciona nada que las respuestas de 2009 tampoco proporcionaron.
TylerH
18

Su pregunta es un poco confusa, pero suponiendo que desea mostrar la cantidad de opciones en un panel:

<div id="preview"></div>

y

$(function() {
  $("#preview").text($("#input1 option").length + " items");
});

No estoy seguro de entender el resto de tu pregunta.

cletus
fuente
14

En un cuadro de opción de selección múltiple, puede usar $('#input1 :selected').length;para obtener el número de opciones seleccionadas. Esto puede ser útil para deshabilitar botones si no se cumple un cierto número mínimo de opciones.

function refreshButtons () {
    if ($('#input :selected').length == 0)
    {
        $('#submit').attr ('disabled', 'disabled');
    }
    else
    {
        $('#submit').removeAttr ('disabled');
    }
}
Philip
fuente
Encontré que esto funcionaba después de quitar las llaves que $('#input1 :selected').length; respaldan la documentación api.jquery.com/length
Leonard Kakande
6

Ok, tuve algunos problemas porque estaba dentro de un

$('.my-dropdown').live('click', function(){  
});

Tenía múltiples dentro de mi página, por eso usé una clase.

Mi lista desplegable se llenó automáticamente por una solicitud ajax cuando hice clic en ella, por lo que solo tenía el elemento $ (esto)

entonces...

Tenía que hacer:

$('.my-dropdown').live('click', function(){
  total_tems = $(this).find('option').length;
});
soñador
fuente
6

La mejor forma es esta

$('#example option').length
Ricardo López García
fuente
Sadikhasan proporcionó esta solución de solo código (bajo valor) 4 años antes. El uso de lengthfue publicado por Karim79 9 años antes. Esta respuesta se puede eliminar de forma segura de la página, ya que es completamente redundante.
mickmackusa
-1

Otro enfoque que puede ser útil.

$('#select-id').find('option').length
zak
fuente
1
La pregunta no es pedir el recuento de solo <option> s seleccionados .
user4642212