Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Iterate through <select> options

Tags:

jquery

People also ask

Is it possible to loop at a select option?

If you loop the select-option, there will be one loop for each row of the select option. So to get all the valid fields between a low value to high value in a select option you need to have a select statement in the check table.

How do I iterate through select options in jQuery?

Simple jQuery code snippet to loop select box options (drop down boxes) in a form to get the values and text from each option. Useful for manipulating values in form select boxes. $('#select > option'). each(function() { alert($(this).

How do I select a specific Dropdownlist using jQuery?

Syntax of jQuery Select Option$(“selector option: selected”); The jQuery select option is used to display selected content in the option tag. text syntax is below: var variableValue = $(“selector option: selected”).


$("#selectId > option").each(function() {
    alert(this.text + ' ' + this.value);
});
  • http://api.jquery.com/each/
  • http://jsfiddle.net/Rx3AP/

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
  }

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

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

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