javascript - Počítanie počtu možností (option) v značke select v jQuery

Ako spočítam počet <option> prvkov v <select> DOM elemente pomocou jQuery?

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

Chcem nájsť počet tagov <option> v DOM elemente <select>, pretože s tým chcem otvoriť panel nastavení s týmto počtom vstupných polí s príslušnou hodnotou možnosti z rozbaľovacieho zoznamu a zmeniť ju opäť v paneli náhľadu.

Vyššie uvedené rozbaľovacie okno je v mojom náhľadovom paneli, ktorý je generovaný jQuery.

Odpoveď č. 1

$('#input1 option').length;

Toto vyprodukuje 2.

Odpoveď č. 2

Riešenie W3C:

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

Odpoveď č. 3

Môžete použiť buď vlastnosť length a length má lepší výkon ako size.

$('#input1 option').length;

ALEBO môžete použiť funkciu size ako (odstránené v 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>

Odpoveď č. 4

Vaša otázka je trochu mätúca, ale predpokladajme, že chcete zobraziť počet možností v paneli:

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

a

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

Nie som si istý, že rozumiem zvyšku tvojej otázky.

Odpoveď č. 5

V poli s možnosťou výberu viacerých položiek môžete použiť $('#input1 :selected').length; na získanie počtu vybratých možností. To môže byť užitočné na deaktivovanie tlačidiel, ak nie je splnený určitý minimálny počet možností.

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

Súvisiace články