ทำซ้ำผ่านตัวเลือก <select>

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

ฉันจะใช้ JQuery เพื่อแสดงค่าและข้อความของแต่ละตัวเลือกใน<select>องค์ประกอบได้อย่างไร ฉันแค่ต้องการแสดงมันในalert()กล่อง

$("#selectId > option").each(function() {
    alert(this.text + ' ' + this.value);
});

• http://api.jquery.com/each/
• http://jsfiddle.net/Rx3AP/

สิ่งนี้ใช้ได้สำหรับฉัน

$(function() {
    $("#select option").each(function(i){
        alert($(this).text() + " : " + $(this).val());
    });
});

ยังสามารถใช้แปรสภาพแต่ละดัชนีและองค์ประกอบ

$('#selectIntegrationConf').find('option').each(function(index,element){
 console.log(index);
 console.log(element.value);
 console.log(element.text);
 });

// สิ่งนี้จะได้ผลเช่นกัน

$('#selectIntegrationConf option').each(function(index,element){
 console.log(index);
 console.log(element.value);
 console.log(element.text);
 });

และสิ่งที่จำเป็นไม่ใช่วิธีการเสาะหาสำหรับผู้ติดตามเนื่องจาก Google ดูเหมือนจะส่งทุกคนที่นี่:

  var select = document.getElementById("select_id");
  for (var i = 0; i < select.length; i++){
    var option = select.options[i];
    // now have option.text, option.value
  }

คุณสามารถลองสิ่งนี้ได้เช่นกัน

HTMLรหัสของคุณ

<select id="mySelectionBox">
    <option value="hello">Foo</option>
    <option value="hello1">Foo1</option>
    <option value="hello2">Foo2</option>
    <option value="hello3">Foo3</option>
</select>

คุณJQueryรหัส

$("#mySelectionBox option").each(function() {
    alert(this.text + ' ' + this.value);
});

หรือ

var select =  $('#mySelectionBox')[0];

  for (var i = 0; i < select.length; i++){
    var option = select.options[i];
    alert (option.text + ' ' + option.value);
  }

$.each($("#MySelect option"), function(){
                    alert($(this).text() + " - " + $(this).val());                    
                });

ถ้าคุณไม่ต้องการ Jquery (และสามารถใช้ ES6 ได้)

for (const option of document.getElementById('mySelect')) {
  console.log(option);
}

รูปแบบอื่นของคำตอบที่เสนอไปแล้วโดยไม่มี jQuery

Object.values(document.getElementById('mySelect').options).forEach(option => alert(option))