forEach возвращает неопределенное значение при сравнении значений параметра и родительского идентификатора - PullRequest
Новая
       27

forEach возвращает неопределенное значение при сравнении значений параметра и родительского идентификатора

0 голосов
/ 09 апреля 2020

Итак, я хочу получить все элементы <select> и идентификатор выпадающего списка "страна".

У меня есть следующее, которое помещает <selects> в коллекцию HTML, а затем сравнивает первый вариант, который обычно называется «Афганистан». Если 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);

Ответы [ 2 ]

1 голос
/ 14 апреля 2020

Вы можете достичь этого, используя foreach l oop или карту. Ошибка в том, что внутри l oop

нет возврата. Надеюсь, эта помощь 

<!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>
1 голос
/ 09 апреля 2020

Синтаксис выглядит немного не так. Использование .map() вернет что-то, если оно удовлетворяет условию, но .map() не работает на nodelist, поэтому вам необходимо преобразовать его в array.

.filter() идеально подходит для чего-то подобного, но возвращает элемент HTML, а не ID, поэтому мы будем придерживаться .map().

Кроме того, вы просматриваете <select> элементы, поэтому вам не нужно переходить к родительскому элементу. Наконец, чтобы избежать пустых элементов массива для несоответствующих элементов <select> - вот где .filter() было бы здорово - я помещаю идентификаторы в массив вместо объявления функции в переменной: 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...