CODEWITHSUNDEEP
javascriptdeveloper-tools
Machtyn
Machtyn

Reputation: 3272

Printing list of options from a select element in Developer Tools

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.

Upvotes: 3

Views: 3970

Answers (5)

KevBot
KevBot

Reputation: 18888

You can do this with just this:

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

Upvotes: 0

Caleb O&#39;Leary
Caleb O&#39;Leary

Reputation: 763

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

Upvotes: 4

Machtyn
Machtyn

Reputation: 3272

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

Upvotes: 0

Tuvia
Tuvia

Reputation: 869

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>

Upvotes: 1

Kld
Kld

Reputation: 7068

You can get the values like this:

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

Upvotes: 0

Related Questions