How To Get All The Options From A Select Element In A List

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

Solution 1:

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

Solution 2:

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>

Share