Связанные списки select (JavaScript)


Ниже размещён JavaScript, при помощи которого можно связать два списка select между собой. Например, при выборе региона в первом выпадающем списке, во втором списке появятся города только для этого региона.
Демо-пример (два связанных селекта)
В HTML-исходнике страницы между тегами <head>, вставьте скрипт:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script>
  var dataObject = {
    "
46": "Курск,Железногорск,Курчатов,Льгов,Рыльск,Щигры",
    "
48": "Липецк,Елец,Грязи,Усмань,Лебедянь,Данков,Чаплыгин",
    "
55": "Омск,Тара,Исилькуль,Калачинск,Называевск,Тюкалинск"
  };
  var makeRelation = (function () {
    function change(slave, data){
      var x, dataArray, option;
      slave.innerHTML = "";
      if (!(this.value in data)){
        return false;
      }
      dataArray = data[this.value].split(",");
      for(x = 0; x < dataArray.length; x++) {
        option = document.createElement("option");
        option.value = String(x);
        option.innerHTML = dataArray[x];
        slave.appendChild(option);
      }}
    return function (master, slave, data) {
      master.onchange = function () {
        change.call(this, slave, data);}
      master.onchange();}
  })();
  makeRelation(gid("
region"), gid("gorod"), dataObject);
  function gid(txt){
    return document.getElementById(txt);}
</script>
В 26-й строке прописаны id для выпадающих списков select:
region - это id select(а) для выпадающего списка регионов;
gorod - это id select(а) для выпадающего списка городов.
В строке 3, 4, 5 - это для первого выпадающего списка (id="region") прописаны числовые значения (коды регионов) и города для каждого числового значения. Города будут отображаться во втором выпадающем списке (id="gorod").
Пример HTML-кода для выпадающих списков:
<select name="Регион" id="region">
<option selected value="
?">Выберите регион</option>
<option value="
46">Курская область</option>
<option value="
48">Липецкая область</option>
<option value="
55">Омская область</option>
</select>

<select name="
Город" id="gorod">
</select>
Свойства select (id="region"):
option (название) -- пропишите регион: область, край и т.п.;
value (значение) -- число (смотреть в скрипте для городов этого региона).
Свойства select (id="gorod"):
Для второго выпадающего списка пропишите только имя, например: Город.

Связанные селекты между собой (вариант №2)


Если вам нужны два связанных списка select с обратной связью между собой. Например, при выборе в первом списке изменится значение во втором и наоборот, (ниже размещён пример с размерами для мужских футболок).
Демо-пример (select с обратной связью между собой)
Российский размер:
Международный:
В HTML-исходнике страницы между тегами <head>, вставьте скрипт:
<script>
(function() {
var ros = document.getElementById('
rus'),
mir = document.getElementById('
mezh');
ros.onchange = function(){ mir.selectedIndex = this.selectedIndex; };
mir.onchange = function(){ ros.selectedIndex = this.selectedIndex; };
})();
</script>
rus - это id select(а) для выпадающего списка российских размеров.
mezh - это id select(а) для выпадающего списка международных размеров.
Пример HTML-кода для выпадающих списков:
<select name="Российский размер" id="rus">
<option selected value="
0">Выберите</option>
<option value="
44">44</option>
<option value="
46">46</option>
<option value="
48">48</option>
<option value="
50">50</option>
<option value="
52">52</option>
<option value="
54">54</option>
<option value="
56">56</option>
</select>

<select name="
Международный размер" id="mezh" >
<option selected value="
0">Выберите</option>
<option value="
XS">XS</option>
<option value="
S">S</option>
<option value="
M">M</option>
<option value="
L">L</option>
<option value="
XL">XL</option>
<option value="
XXL">XXL</option>
<option value="
XXXL">XXXL</option>
</select>
Заполняйте выпадающие списки select 1 и 2 в одинаковой последовательности (select1 первый option = select2 первый option).
Скачать исходник .wbs (версия 12.3.0)