javascript - การนับจำนวนแท็ก option ในแท็ก select ด้วย jQuery

ฉันจะนับจำนวน <option> ในองค์ประกอบ DOM <select> โดยใช้ jQuery ได้อย่างไร?

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

ฉันต้องการหาจำนวนแท็ก <option> ในองค์ประกอบ DOM <select> เนื่องจากด้วยจำนวนนี้ฉันต้องการเปิดแผงการตั้งค่าพร้อมกับจำนวนช่องป้อนข้อมูลที่สอดคล้องกับค่าของตัวเลือกจากกล่องแบบเลื่อนลงในนั้นและเพื่อเปลี่ยนมันอีกครั้งในแผงตัวอย่าง

กล่องแบบเลื่อนลงด้านบนอยู่ในแผงแสดงตัวอย่างของฉันซึ่งสร้างโดย jQuery

คำตอบ #1

$('#input1 option').length;

นี่จะได้ผลลัพธ์เป็น 2

คำตอบ #2

วิธีแก้ปัญหาของ W3C:

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

คำตอบ #3

คุณสามารถใช้คุณสมบัติ length ได้ทั้งสอง และ length จะทำงานได้ดีกว่า size ในแง่ของประสิทธิภาพ

$('#input1 option').length;

หรือคุณสามารถใช้ฟังก์ชัน size เช่น (ถูกลบใน 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>

คำตอบ #4

คำถามของคุณค่อนข้างสับสนเล็กน้อย แต่สมมติว่าคุณต้องการแสดงจำนวนตัวเลือกในแผง:

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

และ

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

ไม่แน่ใจว่าฉันเข้าใจส่วนที่เหลือของคำถามของคุณหรือไม่

คำตอบ #5

ในกล่องตัวเลือกแบบหลายตัวเลือก คุณสามารถใช้ $ ('#input1 :selected').length; เพื่อให้ได้จำนวนตัวเลือกที่ถูกเลือก สิ่งนี้สามารถมีประโยชน์ในการปิดใช้งานปุ่มหากจำนวนตัวเลือกขั้นต่ำที่กำหนดไม่ได้ถูกเลือกครบ

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