javascript - Numărarea numărului de etichete option dintr-o etichetă select în jQuery

Cum pot să număr numărul de <option>-uri dintr-un element DOM <select> folosind jQuery?

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

Vreau să găsesc numărul de etichete <option> din elementul DOM <select>, deoarece cu asta vreau să deschid panoul de setări cu acel număr de câmpuri de introducere cu valoarea corespunzătoare a opțiunii din lista derulantă în el și să o schimb din nou în panoul de previzualizare.

Caseta derulantă de mai sus se află în panoul meu de previzualizare, care este generat de jQuery.

Răspuns #1

$('#input1 option').length;

Acesta va produce 2.

Răspunsul #2

Soluția W3C:

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

Răspunsul #3

Puteți folosi fie proprietatea length, iar length are performanțe mai bune decât size.

$('#input1 option').length;

SAU poți folosi funcția size ca (eliminată în jQuery v3)

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

$(document).ready(function(){
   console.log($('#input1 option').size());
   console.log($('#input1 option').length);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select data-attr="dropdown" id="input1">
   <option value="Male" id="Male">Male</option>
   <option value="Female" id="Female">Female</option>
</select>

Răspunsul #4

Întrebarea ta este puțin confuză, dar presupunând că vrei să afișezi numărul de opțiuni într-un panou:

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

și

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

Nu sunt sigur că înțeleg restul întrebării tale.

Răspunsul #5

Într-o casetă de opțiuni cu selecție multiplă, poți folosi $ ('#input1 :selected').length; pentru a obține numărul de opțiuni selectate. Acest lucru poate fi util pentru a dezactiva butoanele dacă nu este atins un anumit număr minim de opțiuni.

function refreshButtons () {
    if ($('#input :selected').length == 0)
    {
        $('#submit').attr ('disabled', 'disabled');
    }
    else
    {
        $('#submit').removeAttr ('disabled');
    }
}