Contando o número de tags de opção em uma tag select no jQuery

159

Como posso contar o número de <option>s em um <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>

Quero encontrar o número de <option>tags no <select>elemento DOM, pois com isso quero abrir o painel de configurações com esse número de campos de entrada com o valor de opção correspondente na caixa suspensa e alterá-lo novamente na visualização painel.

A caixa suspensa acima está no meu painel de visualização, que é gerado pelo jQuery.

Misericórdia
fonte

Respostas:

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

Isso irá produzir 2.

nightingale2k1
fonte
51

A solução W3C:

var len = document.getElementById("input1").length;
karim79
fonte
5
Uma variação deste método com javascript moderna será var len = document.querySelector("#input1").length;
Jacob Nelson
22

Você pode usar qualquer propriedade length e lengthé melhor desempenho então size.

$('#input1 option').length;

OU você pode usar a função de tamanho como

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

Demo

Sadikhasan
fonte
2
Isso não fornece nada que as respostas de 2009 também não tenham fornecido.
TylerH
18

Sua pergunta é um pouco confusa, mas suponha que você queira exibir o número de opções em um painel:

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

e

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

Não sei se entendi o resto da sua pergunta.

cleto
fonte
14

Em uma caixa de opção de seleção múltipla, você pode usar $('#input1 :selected').length;para obter o número de opções selecionadas. Isso pode ser útil para desativar botões se um determinado número mínimo de opções não for atendido.

function refreshButtons () {
    if ($('#input :selected').length == 0)
    {
        $('#submit').attr ('disabled', 'disabled');
    }
    else
    {
        $('#submit').removeAttr ('disabled');
    }
}
Philip
fonte
Encontrei este trabalho depois de remover as chaves $('#input1 :selected').length; de apoio documentação api.jquery.com/length
Leonard Kakande
6

Ok, tive alguns problemas porque estava dentro de um

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

Eu tinha múltiplos dentro da minha página, por isso usei uma classe.

Meu menu suspenso foi preenchido automaticamente por uma solicitação de ajax quando eu cliquei nele, então eu só tinha o elemento $ (this)

tão...

Eu tive que fazer:

$('.my-dropdown').live('click', function(){
  total_tems = $(this).find('option').length;
});
sonhador
fonte
6

A melhor forma é essa

$('#example option').length
Ricardo López García
fonte
Essa solução somente de código (baixo valor) foi fornecida 4 anos antes pela Sadikhasan. O uso de lengthfoi postado por Karim79 9 anos antes. Esta resposta pode ser removida com segurança da página, pois é completamente redundante.
mickmackusa
-1

Outra abordagem que pode ser útil.

$('#select-id').find('option').length
zak
fonte
1
A pergunta não está pedindo a contagem de apenas <option> s selecionados .
user4642212