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

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.

$('#input1 option').length;

Isso irá produzir 2.

A solução W3C:

var len = document.getElementById("input1").length;

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

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.

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');
    }
}

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;
});

A melhor forma é essa

$('#example option').length

Outra abordagem que pode ser útil.

$('#select-id').find('option').length