CODEWITHSUNDEEP
jquery
user208662
user208662

Reputation: 10997

Iterate through <select> options

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.

Upvotes: 243

Views: 425513

Answers (9)

arif ardiansyah
arif ardiansyah

Reputation: 517

After try several code, and still not working, I go to official documentation of select2.js. here the link: https://select2.org/programmatic-control/add-select-clear-items

from that the way to clear selection select2 js is:

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

Upvotes: 0

zzart
zzart

Reputation: 11493

Another variation on the already proposed answers without jQuery. 

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

Upvotes: 5

Jeyko Caicedo
Jeyko Caicedo

Reputation: 101

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

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

Upvotes: 7

Yojana Ambavkar
Yojana Ambavkar

Reputation: 106

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

Upvotes: 6

Du-Lacoste
Du-Lacoste

Reputation: 12827

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

Upvotes: 7

rogerdpack
rogerdpack

Reputation: 66961

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
  }

Upvotes: 34

Arun Pratap Singh
Arun Pratap Singh

Reputation: 3666

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

Upvotes: 32

IT ppl
IT ppl

Reputation: 2647

This worked for me

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

Upvotes: 95

karim79
karim79

Reputation: 342795

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

Upvotes: 417

Related Questions