从开发人员工具中的 select 元素打印选项列表
Printing list of options from a select element in Developer Tools
我试图在 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>
我的 select 或者在控制台上是:
$$('#states > option').values
值 returns 一个 ArrayIterator。但我不确定该怎么做。
我想返回的是每个选项的值和每个选项的文本。
不确定您想要数据的方式,可以将它们推送到数组或对象吗?这是获取数组数组的示例,每个子数组包含 [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);
});
你可以这样做:
$('#states > option').each(function (){
console.log(this.value, this.text);
});
感谢大家的帮助。每个答案都让我接近我的解决方案。由于某种原因 "each" 对我不起作用,但 "map" 对我有用。
这是我的答案:
var states = $$('#states option')
states.map(function(state) {
console.log(state.value, state.text);
});
我试图在 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>
我的 select 或者在控制台上是:
$$('#states > option').values
值 returns 一个 ArrayIterator。但我不确定该怎么做。
我想返回的是每个选项的值和每个选项的文本。
不确定您想要数据的方式,可以将它们推送到数组或对象吗?这是获取数组数组的示例,每个子数组包含 [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);
});
你可以这样做:
$('#states > option').each(function (){
console.log(this.value, this.text);
});
感谢大家的帮助。每个答案都让我接近我的解决方案。由于某种原因 "each" 对我不起作用,但 "map" 对我有用。
这是我的答案:
var states = $$('#states option')
states.map(function(state) {
console.log(state.value, state.text);
});