正在从开发人员工具中的select元素打印选项列表

Printing list of options from a select element in Developer Tools

本文关键字：select 元素 打印选项 列表 工具 开发      更新时间：2023-09-26

当我在Chrome（或Firefox）的开发者工具控制台中时，我试图从一个select元素中提取值列表，但我在其他地方看到的各种答案都有问题。这些答案都是几年前的，似乎对我不起作用。

以以下为例：

<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返回一个ArrayTerator。但我不知道该怎么办。

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

如果不确定数据的用途，可以将它们推送到数组或对象中？下面是一个获取数组的例子，每个子数组都包含[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);
}

你可以试试这个：

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>

您可以获得如下值：

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

感谢大家的帮助。每一个答案都让我接近我的解决方案。出于某种原因，"每个"对我来说都不起作用，但"地图"起了作用。

这是我的答案：

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

您只需使用以下功能即可完成此操作：

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