在开发人员工具中从select元素打印选项列表
提问于 2016-04-18 09:01:09
在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值返回一个ArrayIterator。但我不知道该怎么办。
我希望返回的是每个选项的值和每个选项的文本。
回答 5
Stack Overflow用户
回答已采纳
发布于 2016-04-18 09:05:49
不确定您如何需要数据，可以将它们推送到数组或对象中吗？下面是一个获取数组的示例，每个子数组都包含val，文本
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);
}Stack Overflow用户
发布于 2016-04-18 09:08:03
你可以试试这个：
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>
Stack Overflow用户
发布于 2016-04-18 09:17:47
您可以得到这样的值：
var states = $('#states > option');
states.each(function(){
console.log(this.value);
console.log(this.text);
}); 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36700057
复制
腾讯云开发者
