Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   select menu, зависимый от другого select menu (https://javascript.ru/forum/dom-window/24485-select-menu-zavisimyjj-ot-drugogo-select-menu.html)

dadli 02.01.2012 10:41

select menu, зависимый от другого select menu
 
здраствуите.
есть две "select element". нужно сделать например так: при выборе в первом "select element" страны, допустим Индия, в другом "select element" без перезагрузки страницы появились только города Индии, и соответственно, при выборе в первом "select element" страны, допустим Бразилия, в другом "select element" без перезагрузки страницы появились только города Бразилии. заранее благодарю.

7up 05.01.2012 19:57

А в каком виде у вас хранятся эти данные? Страны и города.

Только хотел писать тему с подобным вопросом, решил не засорять форум, отпишусь в этой :)

Решил пробовать хранить данные к примеру в таком виде:
страна | город
Украина | Киев
Украина | Харьков
Украина | Херсон
Россия | Москва
Россия | Краснодар
и т.д.

в первую форму select перечитываются значения до разделителя |
а в зависимости от выбора значения в первом списке фильтруются значения второго.

Но вот как реализовать пока не придумал :) Думаю такое простое решение уже кто-то реализовывал и не однократно.
Заранее спасибо.

7up 05.01.2012 19:58

поспешил с постом :)
за минуту нагуглил решение, думаю вам поможет:
http://delajoom.ru/index.php/instrku...nennyje-select

dadli 05.01.2012 22:13

7up,
спасибо огромное :)

GuardCat 11.01.2012 15:41

Самописный вариант. Значениями элементов списка станут их порядковые номера (от нуля).
<select id = "sex">
  <option value="m" selected>Мужчина</option>
  <option value="f">Женщина</option>
  <option value="x">Зверев</option>
  <option value="?">Другое</option><!-- Данных на это поле нет, соответственно, зависимый селект будет просто очищаться -->
</select>
<select id = "names"></select>
<script>
  var dataObject = {
    "m": "Пётр,Василий,Сергей,Октавиан",
    "f": "Ирина,Светлана,Марина,Евгения",
    "x": "Гламур,Звезда,Шоумен,Куафёр"
  };
  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("sex"), gid("names"), dataObject); // Использование
  function gid(txt){
    return document.getElementById(txt);
  }
</script>

Playground.

viktor112189 10.11.2015 14:50

значения валуе
 
Цитата:

Сообщение от GuardCat (Сообщение 149585)
Самописный вариант. Значениями элементов списка станут их порядковые номера (от нуля).
<select id = "sex">
  <option value="m" selected>Мужчина</option>
  <option value="f">Женщина</option>
  <option value="x">Зверев</option>
  <option value="?">Другое</option><!-- Данных на это поле нет, соответственно, зависимый селект будет просто очищаться -->
</select>
<select id = "names"></select>
<script>
  var dataObject = {
    "m": "Пётр,Василий,Сергей,Октавиан",
    "f": "Ирина,Светлана,Марина,Евгения",
    "x": "Гламур,Звезда,Шоумен,Куафёр"
  };
  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("sex"), gid("names"), dataObject); // Использование
  function gid(txt){
    return document.getElementById(txt);
  }
</script>

Playground.

подскажи пожалуста а как сделать чтобы значения начиналось не начиналось с 0 , надо чтобы оно начилос с нуля но при выборе другой страны значения не менялось а продолжалось . дапустим у меня в стране 4 города , это от 0 до 4 - значения записывается в базу а при выборе другой страны у меня значения города опять начинается с нуля , как сделать чтобы оно продолжилось 5, 6, 7, и так далее

laimas 10.11.2015 14:58

Цитата:

Сообщение от viktor112189
дапустим у меня в стране 4 города , это от 0 до 4

Это будет тогда 0, 1, 2, 3, а продолжалось с 4, а не 5. Но пишется в базу, а что тогда означают 0, 1, 2, ... для городов в базе?


Часовой пояс GMT +3, время: 15:41.