forEach 在比较选项值和返回父 id 时返回 undefined

Question

所以我想获取所有 <select> 元素并获取 "country" 下拉列表的 ID。

我有以下内容，它将 <selects> 推入 HTML 集合，然后比较第一个选项，通常是 'Afghanistan'。如果 true 是 returns parentName.id

的值

这就是理论，但我一直不确定。任何见解将不胜感激？

const selectsAvailable = document.getElementsByTagName("select"),
            countryList = Object.keys(selectsAvailable).forEach((collectedSelect, i) => {
    selectsAvailable[collectedSelect].options[0].value === 'Afghanistan' && selectsAvailable[collectedSelect].options[0].parentNode.id;
});

console.log("countryList>>>>>>", countryList);

Answer 1

语法似乎有点不对劲。如果满足条件，使用 .map() 会 return，但 .map() 不适用于 nodelist，因此您需要将其转换为 array。

.filter() is perfect for something like this, but it returns the HTML element and not the ID, so we'll stick with .map().

此外，您正在遍历 <select> 元素，因此您不需要向上遍历到父元素。最后，为了避免不匹配的 <select> 元素的空数组项——这是 .filter() 会很棒的地方——我将 ID 推送到数组而不是在变量中声明函数：

const selectsAvailable = [...document.getElementsByTagName("select")];
let countryList = [];
selectsAvailable.map(item => {
    return item.options[0].value === 'Afghanistan' ? countryList.push(item.id) : ''
});

console.log("countryList>>>>>>", countryList);

<select id="countries">
  <option value="Afghanistan">Afghanistan</option>
  <option value="Africa">Africa</option>
</select>

<select id="somethingElse">
  <option value="Something">Something</option>
  <option value="Something">Something</option>
</select>

Answer 2

您可以使用 foreach 循环或 map 实现此目的错误是循环中没有 return

希望对您有所帮助

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <select id="1">
        <option value="Afghanistan">Afghanistan</option>
        <option value="Italy">Italy</option>
    </select>
    <select id="2">
        <option value="Spain">Spain</option>
        <option value="SriLanka">Sri Lanka</option>
    </select>

</body>
</html>

<script>
    document.addEventListener("DOMContentLoaded", function () {

        var countryList = [];

        const selectsAvailable = document.getElementsByTagName("select");
        Object.keys(selectsAvailable).forEach((collectedSelect, i) => {
            selectsAvailable[collectedSelect].options[0].value === 'Afghanistan' ?
                countryList.push(selectsAvailable[collectedSelect].options[0].parentNode.id) : ''
        });

        console.log("countryList>>>>>>", countryList);
    });

</script>

forEach 在比较选项值和返回父 id 时返回 undefined

forEach returning undefined when comparing option values and returning parent id

javascript

short-circuiting

htmlcollection