1

есть код:

<form method="post">
   <p><select size="5">
   <option disabled>Выберите страну</option>        
   <option>Австралия</option>       
   <option>Австрия</option>
   <option>Англия</option>
   <option>Аргентина</option>
   <option>Беларусь</option>
   <option>Бельгия</option>
   <option>Болгария</option>
   </select></p>
 </form>

Как сделать, чтобы при выборе, например "Австралия", в другом выпадающем списке отображались лиги? Соответственно в разной стране - разные лиги, а значит и разный список.

Я так понимаю, что можно через массивы, вызывая из ячейки html код заполненного списка, в зависимости от выбранного id элемента списка. Но как это правильно сделать?

6
  • И вы будете хардкодить селекты лиг для каждой страны? Заведите объект который по имени страны будет хранить массив лиг, в зависимости от селектированного названия страны собирайте скриптом на основе массива необходимый селект.
    – yolosora
    28 фев 2018 в 13:26
  • т.е. для каждой страны свой массив, хранящий лиги? Это понятно, а вот как скрипт будет собирать селект на основе массива.. 28 фев 2018 в 13:34
  • Пробегаться по массиву и собирать <option>{value}</option>
    – yolosora
    28 фев 2018 в 13:39
  • хорошо, а чем плохо "хардкодить селекты лиг для каждой страны"?) 28 фев 2018 в 13:43
  • Будет адское дублирование кода, чем это чревато - например если нужно добавить новую страну придется продолжать дублирование, если изменится структура селекта придется менять во всех дублях и т.д.
    – yolosora
    28 фев 2018 в 13:47

1 ответ 1

2

Вот пример на 3 зависимых друг от друга списка:

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

4
  • Да, спасибо, всё заработает. Это будет лучше, чем мой вариант. Может вы знаете как ваш вариант можно использовать в этом: ru.stackoverflow.com/questions/791705/…? 28 фев 2018 в 18:40
  • У меня не работает(((. Правильно ли написан код?? 6 апр 2020 в 13:57
  • Что пишет консоль? Если Uncaught ReferenceError: country_id is not defined, то поменяйте местами HTML и JS код. В этом примере HTML-код должен быть выше, под ним JS.
    – Опан
    6 апр 2020 в 16:57
  • Я отредактировал, как нужно.
    – Опан
    6 апр 2020 в 17:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.