0

Есть select с записанными значениями из массива.Нужно с помощью перебора вывести в какой части массива находится значение select. То-есть если select = "Академгородок" то при нажатии кнопки должно появится red.

const metro = {
	"red" : [
	  'Академгородок', 'Житомирская', 'Святошин', 'Нивки',
	  ],
	"blue" : [
	  'ТЧ-2 «Оболонь»', 'Героев Днепра', 'Оболонь', 'Почайна',
	],
	"green" : [
	  'Сырец', 'Дорогожичи', 'Герцена', 'Лукьяновская',
    ]
}

let selLine = document.querySelector('#selectLine');
let btnLine = document.querySelector('.btnLine');
let outSecond = document.querySelector('.outSecond');

let massKey = Object.keys(metro);
let massVal = Object.values(metro);

for(let i = 0; i < massVal.length; i++) {
	let val = massVal[i];
	for(let j = 0; j < val.length; j++) {
		selLine.add(new Option(val[j]));
	}
}       

btnLine.addEventListener('click', function() {
	  let val = selLine.value;
	  for(let key in massVal) {
	  	document.write(val[key])
	  }
});
<select id="selectLine"></select>
<button class="btnLine">Push</button>
<div class="outSecond"></div>

2 ответа 2

1

const metro = {
	"red" : [
	  'Академгородок', 'Житомирская', 'Святошин', 'Нивки',
	  ],
	"blue" : [
	  'ТЧ-2 «Оболонь»', 'Героев Днепра', 'Оболонь', 'Почайна',
	],
	"green" : [
	  'Сырец', 'Дорогожичи', 'Герцена', 'Лукьяновская',
    ]
}

let selLine = document.querySelector('#selectLine');
let btnLine = document.querySelector('.btnLine');
let outSecond = document.querySelector('.outSecond');

let massKey = Object.keys(metro);
let massVal = Object.values(metro);

for(let i = 0; i < massVal.length; i++) {
	let val = massVal[i];
	for(let j = 0; j < val.length; j++) {
		selLine.add(new Option(val[j]));
	}
}       

btnLine.addEventListener('click', function() {
	  let val = selLine.value;
	  for(let i = 0; i < massKey.length; i++) { //начиная с этого места
	  	if(metro[massKey[i]].indexOf(val) >= 0) {
			outSecond.textContent = massKey[i];
		}
	  }
});
<select id="selectLine"></select>
<button class="btnLine">Push</button>
<div class="outSecond"></div>

1

const data = {
    red: [
        'Академгородок', 'Житомирская', 'Святошин', 'Нивки'
    ],
    blue: [
        'ТЧ-2 «Оболонь»', 'Героев Днепра', 'Оболонь', 'Почайна'
    ],
    green: [
        'Сырец', 'Дорогожичи', 'Герцена', 'Лукьяновская'
    ]
};

const selector = document.querySelector('select#selector');

for (const value of Object.values(data))
    for (const option_text of value)
        selector.add(new Option(option_text));

const button = document.querySelector('button#selector-ok');
const out = document.querySelector('span#selector-out');

button.addEventListener('click', () => {
    for (const key in data) {
        const array = data[key];
        if (array.indexOf(selector.value) !== -1)
            return out.textContent = key;
    }
});
<select id="selector"></select>
<button id="selector-ok">OK</button>

<span id="selector-out"></span>

2
  • Извиняюсь, однако @AlexDevTime уже дал похожий ответ. Мой интернет решил позабавиться, поэтому я не сразу заметил, что уже есть симметричное решение.
    – moragame
    9 янв 2020 в 14:04
  • Да, но ты постарался переделать весь код, а я поправил только нужное место. Я бы твой вариант выбрал ))) Лайкнул. 9 янв 2020 в 14:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.