How to get all the options from a select element in a list

Question

Using jquery (or native js). How do I get all the options html in a list, so the output is something like:

var options = ['<option value="" selected="">---------</option>', <option value="1">Option 1</option>']

You want the html into an array? You can read the html and split it, but it might not be what you exactly want. — epascarello, Jan 12 '18 at 17:11
Possible duplicate of [Get an array of list element contents in jQuery](https://stackoverflow.com/questions/247023/get-an-array-of-list-element-contents-in-jquery) — dimwittedanimal, Jan 12 '18 at 17:13
Do you want the array to contain the HTML of the elements, or the elements themselves? Your question shows both. — Rory McCrossan, Jan 12 '18 at 17:19
Sorry I wasn't clear just the html string of the elements (not the objects) — Yunti, Jan 12 '18 at 17:26

Brijesh Bhakta · Accepted Answer · 2018-01-12T17:29:52.463

2

You can get the select node and find all the options in the select node and get the html from those options.

var selectNode = $('select-selector');
var options = selectNode.find('option').toArray().map(function (o) { return o.outerHTML});

Edit as per suggestion from comment by Rory.

$.map(selectNode.find('option'), function(o) { return o.outerHTML; });

edited Jan 12 '18 at 17:29

answered Jan 12 '18 at 17:22

Brijesh Bhakta

1,280
1
8
14

Note that you don't need `toArray()` in there, jQuery has its own implementation of `map()` – Rory McCrossan Jan 12 '18 at 17:25

Anthony · Answer 2 · 2018-01-12T19:06:47.757

Something like this?

var selectBoxEl = document.getElementById('selectBox');
var arrayOfNodes = selectBoxEl.childNodes;
var optionsArr = [];
// loop through child Nodes and only get option nodes
for (var i = 0; i < arrayOfNodes.length; i++) {
 if (arrayOfNodes[i].nodeName === 'OPTION') {
   optionsArr.push(arrayOfNodes[i].outerHTML);
  }
}

console.log(optionsArr);

<select id="selectBox">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

How to get all the options from a select element in a list

2 Answers2

Linked