Есть страница, на которой выводятся табличные данные - скажем: Название1, Название2, Название3. Придумал простенький код, который к этим названиям (поле input) подтягивает поле select с выбором значений для замены в input. Все нормально, когда input один. Как только появляется второй (дальше еще даже не заглядывал) - у второго начинаются проблемы с заполнением поля input и с закрытием select по focusout. При этом первый элемент работает как ни в чем не бывало!
Прикрепляю скрипт, который я сваял:
function update(e, targetId) {
let target = document.getElementById('bdf['+targetId+']');
let target2 = document.getElementById('code['+targetId+']');
let target3 = document.getElementById('sif['+targetId+']')
let ob = e.options[e.selectedIndex];
target.value = `${ob.value} - ${ob.text}`;
target2.value = `${ob.value}`;
target3.style='display:none';
}
let elements = document.querySelectorAll('select');
for (const dropdown of elements) {
dropdown.addEventListener('mouseout', (event) => {
if (!dropdown.contains(event.relatedTarget)) {
dropdown.style='display:none';
}
}, true);
}
Не знаю: как удалить, но нашел ошибку - были ошибки в id - яваскрипт ведь регистрозависимый. Поправил - работает! Так, что, если кому-то нужна реализация из нескольких строчек - вот она
