I have a element in HTML. This element represents a drop down list. I\'m trying to understand how to iterate through the options in the
<
You can try like this too.
Your HTML
Code
<select id="mySelectionBox">
<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);
}
Another variation on the already proposed answers without jQuery.
Object.values(document.getElementById('mySelect').options).forEach(option => alert(option))
$("#selectId > option").each(function() {
alert(this.text + ' ' + this.value);
});
This worked for me
$(function() {
$("#select option").each(function(i){
alert($(this).text() + " : " + $(this).val());
});
});
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);
});
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
}