Как сделать «категорию выбора» на html js?

Question

[Павел]

есть например

<select name="name">
        <option>Город1</option>
        <option>Город2</option>
        <option>Город3</option>
        <option>Город4</option>
        <option>Город5</option>
        <option>Город6</option>
    </select>

если выберем город 1 то в списке выбора рядом должны быть магазины которые к этому городу относятся

<select name="magaz">
        <option>Магазин1</option>
        <option>Магазин2</option>
        <option>Магазин3</option>
    </select>

соответсвтенно если другой город то и магазины другие, голова что то не варит совсем, как это сделать?

Answer 1

[Gilfy]

https://jsfiddle.net/3t1Lkzpe/

Answer 2

[Антон]

1) Создать таблицу городов
2) Создать таблицу магазинов с привязкой магазина к ID города
3) Вставить в value опшенов городов их ID (каждого конкретного)
4) При выборе города аяксом отправлять запрос к обработчику на выдергивание из БД магазинов по ИД выбранного города
5) Отправить результат обратно и сформировать второй селект из полученных магазинов

Comments

[Павел]

это штука подходящая , только как это все сделать?) Может есть код реализации подобный для примера?

[Антон]

mrusklon, Нет, это индивидуальное решение исходя из структуры Вашего сайта. Я описал лишь один из алгоритмов

[Павел]

Антон, у меня пока нет сайта , я просто пытаюсь что то создать под свою задачу :)
допустим у меня есть БД, там id городов и id магазинов

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

Answer 3

[Юпитер Макс]

тут просто поставьте свои значения value при совпадении будет показывать то что нужно

Comments

[Павел]

это не совсем то что я имел введу,
можно сказать это категория и подкатегории , как меню только в виде выбора

<select id="select1">
  <option value="1">Город1</option>
  <option value="2">Город2</option>
  <option value="3">Город3</option>
</select>

<select id="select2">
  <option value="1">маг1</option>
  <option value="2">маг2</option>
  <option value="3">маг3</option>
</select>

<select id="select3">
  <option value="1">маг4</option>
  <option value="2">маг5</option>
  <option value="3">маг6</option>
</select>

если выберем Город 1 то список должны увидеть только который с маг1 маг2 маг3 , если город 2 то маг 4,5,6 и так может быть много городов и много магазинов