如何从列表中的选择元素中获取所有选项答案

【问题标题】：How to get all the options from a select element in a list如何从列表中的选择元素中获取所有选项
【发布时间】：2018-01-13 03:06:47
【问题描述】：

使用 jquery（或原生 js）。如何获取列表中的所有选项 html，因此输出类似于：

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

【问题讨论】：

你想把 html 放到一个数组中吗？您可以阅读 html 并将其拆分，但它可能不是您真正想要的。
Get an array of list element contents in jQuery的可能重复
那个骗子不是 OP 想要的
您希望数组包含元素的 HTML，还是包含元素本身？您的问题显示了两者。
抱歉，我并不清楚元素（不是对象）的 html 字符串

标签： javascript jquery

【解决方案1】：

您可以获取选择节点并找到选择节点中的所有选项并从这些选项中获取html。

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

根据Rory 的评论建议进行编辑。

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

【讨论】：

注意这里不需要toArray()，jQuery有自己的map()实现

【解决方案2】：

这样的？

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>

【讨论】：