Iterate through options

Christopher Pierce | July 09, 2026

I have a <select> element in HTML. This element represents a drop down list. I'm trying to understand how to iterate through the options in the <select> element via JQuery.

How do I use JQuery to display the value and text of each option in a <select> element? I just want to display them in an alert() box.

9 Answers

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

10

This worked for me

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

1

can also Use parameterized each with index and the element.

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

// this will also work

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

0

And the requisite, non-jquery way, for followers, since google seems to send everyone here:

 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 } 

If you don't want Jquery (and can use ES6)

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

1

You can try like this too.

Your HTML Code

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

You JQuery Code

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

OR

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()); }); 

Another variation on the already proposed answers without jQuery.

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

After try several code, and still not working, I go to official documentation of select2.js. here the link:

from that the way to clear selection select2 js is:

$('#mySelect2').val(null).trigger('change'); 

Your Answer

Sign up or log in

Post as a guest

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy