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 nodesfor (var i = 0; i < arrayOfNodes.length; i++) {
	if (arrayOfNodes[i].nodeName === 'OPTION') {
  	optionsArr.push(arrayOfNodes[i].outerHTML);
  }
}

console.log(optionsArr);

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

Share

You may like these posts

• 
  Canvas.todataurl() Tainted Canvases May Not Be Exported
• 
  Update Options In Select Dynamically
• 
  Highcharts: How Do I Change The Legend Location In The Export Of A Chart?
• 
  Jquery: Hide Children, Show Nth Child?