const para = document.querySelector(".out-17");
const cities = {
value1: ["1 FIGURES", "2 FIGURES"],
value2: ["1 FIGURES", "2 FIGURES"],
value3: ["1 FIGURES", "2 FIGURES", "3 FIGURES", "4 FIGURES", "5 FIGURES"],
value4: ["1 FIGURES", "2 FIGURES", "3 FIGURES", "4 FIGURES", "5 FIGURES"],
value5: ["1 FIGURES", "2 FIGURES", "3 FIGURES", "4 FIGURES", "5 FIGURES"],
value6: ["1 FIGURES", "2 FIGURES", "3 FIGURES", "4 FIGURES", "5 FIGURES"],
value7: ["1 FIGURES", "2 FIGURES", "3 FIGURES", "4 FIGURES", "5 FIGURES"],
value8: ["1 FIGURES", "2 FIGURES", "3 FIGURES", "4 FIGURES", "5 FIGURES"]
};
const country = document.getElementById("country");
const city = document.querySelector("#city");
selectCountry();
city.onchange = yourprice;
country.onchange = selectCountry;
country.addEventListener("change", yourprice);
function yourprice() {
para.textContent = {
value1: ['230', '300'],
value2: ['270', 'value2 + choice2'],
value3: ['310', 'value3 + choice2', 'value3 + choice3', 'value3 + choice4', 'value3 + choice5'],
value4: ['370', 'value4 + choice2', 'value4 + choice3', 'value4 + choice4', 'value4 + choice5'],
value5: ['460', 'value5 + choice2', 'value5 + choice3', 'value5 + choice4', 'value5 + choice5'],
value6: ['530', 'value6 + choice2', 'value6 + choice3', 'value6 + choice4', 'value6 + choice5'],
value7: ['670', 'value7 + choice2', 'value7 + choice3', 'value7 + choice4', 'value7 + choice5'],
value8: ['800', 'value8 + choice2', 'value8 + choice3', 'value8 + choice4', 'value8 + choice5'],
}[country.value][city.value];
}
function selectCountry() {
city.innerHTML = cities[country.value].map((e, i) => `<option value="${i}">${e}</option>`).join('');
}