Menghitung jumlah tag opsi di tag pilih di jQuery

159

Bagaimana cara menghitung jumlah <option>s dalam <select>elemen DOM menggunakan jQuery?

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

Saya ingin menemukan jumlah <option>tag di <select>elemen DOM, karena dengan itu saya ingin membuka panel pengaturan dengan jumlah kolom input dengan nilai opsi yang sesuai dari kotak drop-down di dalamnya dan mengubahnya lagi di pratinjau panel.

Kotak drop-down di atas ada di panel pratinjau saya yang dihasilkan oleh jQuery.

Belas kasihan
sumber

Jawaban:

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

Ini akan menghasilkan 2.

nightingale2k1
sumber
51

Solusi W3C:

var len = document.getElementById("input1").length;
karim79
sumber
5
Variasi untuk metode ini dengan javascript modern adalah var len = document.querySelector("#input1").length;
Jacob Nelson
22

Anda dapat menggunakan properti panjang dan lengthperforma yang lebih baik size.

$('#input1 option').length;

ATAU Anda dapat menggunakan fungsi ukuran suka

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

Demo

Sadikhasan
sumber
2
Ini tidak memberikan apa pun jawaban dari tahun 2009 juga tidak memberikan.
TylerH
18

Pertanyaan Anda agak membingungkan, tetapi dengan asumsi Anda ingin menampilkan jumlah opsi dalam panel:

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

dan

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

Tidak yakin saya mengerti sisa pertanyaan Anda.

cletus
sumber
14

Dalam kotak opsi multi-pilih, Anda dapat menggunakan $('#input1 :selected').length;untuk mendapatkan jumlah opsi yang dipilih. Ini berguna untuk menonaktifkan tombol jika sejumlah opsi minimum tidak terpenuhi.

function refreshButtons () {
    if ($('#input :selected').length == 0)
    {
        $('#submit').attr ('disabled', 'disabled');
    }
    else
    {
        $('#submit').removeAttr ('disabled');
    }
}
Philip
sumber
Saya menemukan ini berfungsi setelah menghapus kawat gigi yang $('#input1 :selected').length; mendukung dokumentasi api.jquery.com/length
Leonard
6

Ok, saya punya beberapa masalah karena saya di dalam

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

Saya memiliki banyak kelipatan di dalam halaman saya itu sebabnya saya menggunakan kelas.

Drop down saya diisi secara otomatis oleh permintaan ajax ketika saya mengkliknya, jadi saya hanya memiliki elemen $ (ini)

begitu...

Saya harus melakukan:

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

Bentuk terbaiknya adalah ini

$('#example option').length
Ricardo López García
sumber
Solusi khusus kode ini (bernilai rendah) diberikan 4 tahun sebelumnya oleh Sadikhasan. Penggunaan lengthini diposting oleh Karim79 9 tahun sebelumnya. Jawaban ini dapat dihapus dengan aman dari halaman karena benar-benar berlebihan.
mickmackusa
-1

Pendekatan lain yang bisa bermanfaat.

$('#select-id').find('option').length
zak
sumber
1
Pertanyaannya bukan menanyakan hitungan hanya yang terpilih <option> .
user4642212