связанный список

Question

На сайте имеется 2 выпадающих списка. Первая Country и вторая City. Как создать код на javascript, чтобы при выборе из первого списка страны, на втором выводились бы города этой страны. Спасибо заранее.

Answer 1

Простой пример, чуть подробнее в комментариях к коду

let arr = { // Создаёт свой список стран и городов, где ключ объекта = страна, а как значение - массив с городами
  'Россия': ['Москва', 'Санкт-Питербург', 'Новосибирск'],
  'Украина': ['Киев', 'Харьков', 'Житомир'],
  'Казахстан': ['Нур-Султан', 'Караганда', 'Алматы']
},
  country = document.querySelector('#country'), // в переменную берём селектор стран..
  city = document.querySelector('#city'); // .. и городов
  
for(let key in arr) { // Далее создаём список стран на выбор в селекторе
  country.insertAdjacentHTML('beforeend', `<option>${key}</option>`);
}


let defaultOption = city.querySelectorAll('option')[0].outerHTML; // Тут будем хранить первый option, который отвечает за "Выберите город"
country.addEventListener('change', function(e) { // Вешаем слушатель на селектор стран
  let cityArr = arr[e.target.value]; // Когда выбрана страна, мы получаем массив городов
  
  city.innerHTML = defaultOption; // Сначала обновим содержимое селектора городов, чтобы очистить список предыдущих городов
  
  for(let key in cityArr) { // Проходим по всем городом выбранной страны и выводим в селектор городов
    city.insertAdjacentHTML('beforeend', `<option>${cityArr[key]}</option>`);
  }
});

city.addEventListener('change', function(e) { // Повешаем слушатель на изменение выбранного города, чтобы вывести то, что выбрали
  console.info(`Выбрано: ${country.value}, ${city.value}`); // Выводим.
});

<select id="country">
  <option display="none">Выберите страну</option>
</select>
<select id="city">
  <option display="none">Выберите город</option>
</select>

Answer 2

Есть пример для трёх селектов:

var all_regions=[];
var all_cites=[[],[],[]];
  
all_regions[0]=["московская обл","ростовская обл","саратовская обл"];
all_regions[1]=["киевская обл","львовская обл","харьковская обл"];
all_regions[2]=["минская обл","брестская обл","гроднинская обл"];
  
all_cites[0][0]=["Москва","Химки","Калуга"];
all_cites[0][1]=["Такой-то город","Такой-то город","Калуга"];
all_cites[0][2]=["Такой-то город","Такой-то город","Такой-то город"];
  
all_cites[1][0]=["Киев","Жмеринка","Бердычев"];
all_cites[1][1]=["Львов","Сокаль","Стрый"];
all_cites[1][2]=["Харьков","Полтава","Пирятин"];
  
all_cites[2][0]=["Минск","Такой-то город","Такой-то город"];
all_cites[2][1]=["Брест","Такой-то город","Такой-то город"];
all_cites[2][2]=["Гродно","Такой-то город","Вильно"];
  
country_id.onchange=function(){
    region_id.disabled=false;
    region_id.innerHTML="<option value='0'>- Выберите регион -</option>";
    myregion=this.value-1;
    if(myregion!=-1){
        for(var i=0;i<all_regions[myregion].length;i++){
            region_id.innerHTML+='<option value="'+(i+1)+'">'+all_regions[myregion][i]+'</option>';
        }
    }else{
        region_id.disabled=true;
        city_id.disabled=true;
    }
}
  
region_id.onchange=function(){
    city_id.disabled=false;
    city_id.innerHTML="<option value='0'>- Выберите город -</option>";
    var mycite=this.value-1;
    if(mycite!=-1){
        for(var i=0;i<all_cites[myregion][mycite].length;i++){
            city_id.innerHTML+='<option value="'+(i+1)+'">'+all_cites[myregion][mycite][i]+'</option>';
        }
    }else{
        city_id.disabled=true;
    }
}

Страна: <select id="country_id" class="StyleSelectBox">
    <option value="0">- выберите страну -</option>
    <option value="1">Россия</option>
    <option value="2">Украина</option>
    <option value="3">Белорусь</option>
</select>
<br /><br />Регион:
<select id="region_id" disabled>
    <option value="0">- Выберите регион -</option>
</select></td><td>
<br /><br />Город:
<select id="city_id" disabled>
    <option value="0">- Выберите город -</option>
</select>

БЛОГ НА HUSL

связанный список

Ответы (2 шт):