Задача с селектором, как решить?

Question

[Ratibor]

Доброе время суток! Вот засел с задачкой: Даны два селекта. В первом находятся страны, во втором - города. Сделайте так, чтобы когда выбирается определенная страна - в другом селекте появлялись города этой страны. В абзац ниже пишите выбранную страну и город через запятую. Первую часть задачи вроде решил но не до конца, а вот вторую часть с параграфом осилить не могу подскажите как сделать, вот мое решение https://codepen.io/RatiboR1978/pen/mMNpOY?editors=1111 Вопросы по задачи такие как сделать чтобы сразу первый раз когда нажимаешь на Россию вылазили города, они почему то появляются только тогда пока в сша не схожу. С параграфом почти такая же проблема при выборе России пока в Абакан не сходишь Москва в параграфе на появляется. Как это поправить?

Answer 1

[0xD34F]

<select id="country"></select>
<select id="сity"></select>
<p></p>

const data = {
  'Франция': [ 'Париж', 'Марсель', 'Лион' ],
  'США': [ 'Вашингтон', 'Чикаго', 'Фарго' ],
  'Италия': [ 'Рим', 'Милан', 'Неаполь' ],
};

const country = document.querySelector('#country');
const city = document.querySelector('#сity');
const p = document.querySelector('p');

country.addEventListener('change', e => {
  setSelectOptions(city, data[e.target.value]);
});

city.addEventListener('change', () => {
  p.innerText = [ country.value, city.value ].join(', ');
});

setSelectOptions(country, Object.keys(data));


function setSelectOptions(selectEl, optionsData) {
  selectEl.innerHTML = optionsData.map(n => `<option>${n}</option>`).join('');
  selectEl.dispatchEvent(new Event('change'));
}

Comments

[Ratibor]

Спасибо да работает как надо!