I am trying to pull the list of values from a select element while in Developer Tools console for Chrome (or Firefox), but I'm having trouble with the various answers I've seen in other places are a few years old and don't seem to work for me.

Take the following as an example:

<select id="states">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="AR">Arkansas</option>
  <option value="CA">California</option>
</select>

My selector on the console would be:

$$('#states > option').values

Values returns an ArrayIterator. But I'm not sure what to do with that.

What I would like to have returned are the value of each option and the text of each option.

I am trying to pull the list of values from a select element while in Developer Tools console for Chrome (or Firefox), but I'm having trouble with the various answers I've seen in other places are a few years old and don't seem to work for me.

Take the following as an example:

<select id="states">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="AR">Arkansas</option>
  <option value="CA">California</option>
</select>

My selector on the console would be:

$$('#states > option').values

Values returns an ArrayIterator. But I'm not sure what to do with that.

What I would like to have returned are the value of each option and the text of each option.

• javascript
• developer-tools

Share Improve this question Follow edited May 13, 2022 at 3:49 Machtyn asked Apr 18, 2016 at 17:01 MachtynMachtyn 3,28088 gold badges4444 silver badges6969 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

Unsure of how you want your data, you could push them to an array, or an object? Here's an example of getting an array of arrays, each sub array containing [val,text]:

var states = [];
$('#states option').each(function(){
    states.push([$(this).val(),$(this).text() ]);
});
console.log(states);

EDIT: Try this, doesn't use jQuery, will just log the info out for you, but you could push it to an empty array like above if you wish.

var states = $$('#states > option');
for (var i = 0; i < states.length; i++) {
    console.log(states[i].value, states[i].innerHTML);
}

You can try this:

const statesEl = document.getElementById('states');
const options = statesEl.getElementsByTagName('option');

const optionValues = Array.prototype.map.call(options, function(optionEl) {
  return {
    value: optionEl.getAttribute('value'),
    text: optionEl.textContent
  };
});

Then you can use optionValues array

    const statesEl = document.getElementById('states');
    const options = statesEl.getElementsByTagName('option');

    const optionValues = Array.prototype.map.call(options, function(optionEl) {
      return {
        value: optionEl.getAttribute('value'),
        text: optionEl.textContent
      };
    });
    
    console.log(optionValues);

<select id="states">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="AR">Arkansas</option>
  <option value="CA">California</option>
</select>

You can get the values like this:

 var states = $('#states > option');
 states.each(function(){ 
    console.log(this.value);
    console.log(this.text);
 }); 

Thank you all for your assistance. Every answer got me close to my solution. For some reason "each" was not working for me, but "map" did.

Here's my answer:

var states = $$('#states option')
states.map(function(state) {
  console.log(state.value, state.text);
});

You can do this with just this:

$('#states > option').each(function (){ 
    console.log(this.value, this.text);
});