0

所以我想抓取所有<select>元素并抓取“国家”下拉菜单的 ID。

我有以下内容，将其推<selects>入 HTMLcollection 然后比较第一个选项，通常是“阿富汗”。如果为 true，则返回 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);
4

2 回答 2

1

语法似乎有点不对劲。.map()如果满足条件，using将返回某些内容，但.map()在 a 上不起作用，nodelist因此您需要将其转换为array.

.filter()非常适合这样的事情，但它返回 HTML 元素而不是 ID，所以我们将坚持使用.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>

于 2020-04-09T13:08:07.140 回答
1

您可以使用 foreach 循环或 map 实现这一点错误是循环内没有返回

希望这有帮助

<!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>
于 2020-04-14T08:48:34.430 回答