从开发人员工具中的选择元素打印选项列表答案

【问题标题】：Printing list of options from a select element in Developer Tools从开发人员工具中的选择元素打印选项列表
【发布时间】：2016-04-18 17:01:09
【问题描述】：

我正在尝试在 Chrome（或 Firefox）的开发者工具控制台中从选择元素中提取最后一个值，但我在其他地方看到的各种答案已经有几年的历史了而且似乎不适合我。

以以下为例：

<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>

我在控制台上的选择器是：

$$('#states > option').values

Values 返回一个 ArrayIterator。但我不知道该怎么办。

我希望返回的是每个选项的值和每个选项的文本。

【问题讨论】：

标签： javascript developer-tools

【解决方案1】：

不确定您想要如何获取数据，您可以将它们推送到数组或对象中吗？下面是获取数组数组的示例，每个子数组包含 [val,text]：

var states = [];
$('#states option').each(function(){
    states.push([$(this).val(),$(this).text() ]);
});
console.log(states);

编辑：试试这个，不使用 jQuery，只会为你记录信息，但如果你愿意，你可以将它推送到上面的空数组。

var states = $$('#states > option');
for (var i = 0; i < states.length; i++) {
    console.log(states[i].value, states[i].innerHTML);
}

【讨论】：

当我尝试这样做时，我得到：Uncaught TypeError: $$(...).each is not a function(…)
你用的是什么版本的jQuery？
Chrome 版本 49.0.2623.112 附带的任何版本。也许我不应该特别指定 JQuery，但我在 Chrome 的开发工具控制台中。
查看我上面编辑的帖子，jQuery 没有自带 chrome，你只是在使用 Chrome 的选择器 API。
谢谢！那行得通。当然，在状态上使用 map() 函数也可以（我发现）。

【解决方案2】：

你可以得到这样的值：

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

【讨论】：

【解决方案3】：

你可以试试这个：

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

那么你可以使用optionValues数组

    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>

【讨论】：

如果您不使用 es6，您可以在代码中使用 var 代替 const，它应该可以正常工作:-)

【解决方案4】：

感谢大家的帮助。每个答案都让我接近我的解决方案。出于某种原因，“each”对我不起作用，但“map”对我有用。

这是我的答案：

var states = $$('#states option')
states.map(function(state) {
  console.log(state.value, state.text);
});

【讨论】：

【解决方案5】：

你可以这样做：

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

【讨论】：