Перебор массива и вывод ключа

130
12 февраля 2022, 09:00

Есть 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>

Answer 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>

Answer 2

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>

READ ALSO
jQuery 1.9.0 - jQuery UI DatePicker

jQuery 1.9.0 - jQuery UI DatePicker

Создаю форму с кучей форм ввода даты datepickerов (вызов датепискеров onclick)

89
CallBack с фрейма в родитель

CallBack с фрейма в родитель

Заранее прошу прощения за странный вопрос

109
В vscode не работает intelligence

В vscode не работает intelligence

Переустановил виндуОткрываю проект на vscode 1

150
Как задать стили элементу дочерним элементам через класс?

Как задать стили элементу дочерним элементам через класс?

Однако в этом коде делается подсветка при наведении на каждое слово, а мне нужно так:

106