Допустим, что вам необходимо сделать такую кобинацию выпадающих списков: список 1 — области, список 2 — города. Но так, что при выборе области из списка 1, в списке «Города» отображаются только города соответствующей облести. Как это сделать на jQuery?

СКРИПТЫ:

1. $(document).ready(function() {
2. $("#region").change(function(){
3.  id = $(this).attr('value');
4.  $.post("data_city.php",{id:id},AfterRegion);
5. });
6. });
7. function AfterRegion (data){
8.  $("#city").empty();
9.  $("#city").append(data);
10. }

HTML-код:

11. < div id=region>
12. < select>
13.  < option value=63>Самарская область
14.  < option value=77>Московская область
15.  < option value=23>Краснодарский край
16. < /select>
17.  < /div>
18. < div id=city>
19. < /div>

ПОЯСНЕНИЯ:

1. DIV с выпадающим списком городов изначально вообще пуст, так как он будет заполнятся динамически после выбора значения в списке областей.

2. После изменения значения в списке областей (строчка 2), мы узнаем код выбранной области (строчка 3) и вызывает процедуру data_city.php (строчка 4), которой передаем это код в виде параметра. Процедура data_city.php должа в качестве результата выдавать (echo или print) SELECT с требуемыми значениями.

После отработки процедуры, ее результат передается в функцию AfterRegion, которая очищает DIV с городами (вначале он и так пуст, но потом старые данные нужно затирать), и вставляет в него сгенерированный фунцией data_city.php выпадающий список.

3. Все.