Как можно избавиться от дублирования кода 25/30 строки?

Question

[olya_097]

Даны два селекта. В первом находятся страны, во втором - города. Сделайте так, чтобы когда выбирается определенная страна - в другом селекте появлялись города этой страны. В абзац ниже пишите выбранную страну и город через запятую.
https://jsfiddle.net/n7jvfr46/2/

Answer 1

[Alex]

Перенесите код в функцию и вызывайте её. Но дублирование все равно будет, вызовы этой функции то останутся.

Answer 2

[Марат Гарифуллин]

Так не то?

const data = {
  Россия:   ['Москва', 'Санкт-Петербург', 'Воронеж'],
  Беларусь: ['Минск', 'Витебск', 'Орша'],
  Украина:  ['Киев', 'Львов', 'Харьков']
};

const countriesSelect = document.querySelector('#countries-select');
const citiesSelect    = document.querySelector('#cities-select');
const paragraph       = document.querySelector('p');

addOptions(countriesSelect, Object.keys(data));
addOptions(citiesSelect, data[countries[0]]);

countriesSelect.addEventListener('change', function() {
  citiesSelect.length = 0;
  addOptions(citiesSelect, data[countriesSelect.value]);
  changeText();
});
countriesSelect.addEventListener('change', changeText);

function setOptions(select, arr) {
 arr.forEach(val => select.add(new Option(val)));
}
function changeText() {
  paragraph.innerHTML = countriesSelect.value +','+ citiesSelect.value;
}

Answer 3

[loopi]

[countriesSelect, citiesSelect].forEach((el)=>{
    el.addEventListener('change', () => {
        if ( ) //...
        else //...
    }
})

или

const paragraph = {
    country: document.querySelector('p .country');
    city: document.querySelector('p .city');
}
//... changeText заменить на соответствующий
paragraph.country.innerHTML = countriesSelect.value;
paragraph.city.innerHTML = citiesSelect.value;