Javascript-зависимые выпадающие списки

Question

В моем приложении пользователей просят ввести:

• Штат -> Город
• Категория -> Подкатегория

City зависит от State, а Sub-Category зависит от Category. Мне бы хотелось, чтобы сначала он работал без javascript, а затем добавить ненавязчивый javascript для улучшения взаимодействия с пользователем.

Как бы вы это реализовали? Задать все независимые поля сразу? Создать многошаговую форму с множеством шагов? Любые другие возможности?

Answer 1

Чтобы это работало без Javascript, вам понадобится такая процедура:

• Выберите штат.
• Нажмите кнопку, которая отправляет форму на сервер.
• Возвращает страницу с выбранным штатом и городами на выбор.
• Нажмите кнопку, которая снова отправляет форму на сервер.

Без сценариев браузер не может ничего сделать в зависимости от того, что вы выбрали на первом шаге, поэтому вы должны сделать это на стороне сервера.

Answer 2

Без JS это было бы отстой.Вы должны:

1. выбрать состояние
2. щелкнуть «далее»
3. сервер получит то состояние, которое вы выбрали, и отобразит новую страницу с раскрывающимся списком соответствующихcites
4. выберите город
5. щелкните далее
6. Что-то происходит

Но с JS пользовательский опыт становится:

1. выберите штат
2. появляется выпадающий список
3. выберите город
4. что-то происходит

Без JS каждый раз, когда вы хотите изменить страницувы должны заставить сервер отображать новую страницу в этом новом состоянии.И для таких задач это просто отстой.

Answer 3

Попробуйте использовать <optgroup>

<select name="cities">
  <optgroup label="State_one">
    <option value="City_one">City one</option>
    <option value="City_two">City two</option>
  </optgroup>
  <optgroup label="State_two">
    <option value="City_three">City three</option>
    <option value="City_four">City four</option>
  </optgroup>
</select>

Вы можете сделать некоторые хакерские операции с CSS с помощью псевдокласса :active, если вы хотите два выбора рядом.