Задача: Заполнение 2-го выпадающего списка (select) в соответствии с выбором в первом
Исходник: Заполнение 2-го выпадающего списка (select) в соответствии с выбором в первом, язык: javascript [code #143, hits: 6911]
автор: - [добавлен: 23.05.2006] 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 	
  2.   "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">	
  3. <html>	
  4. <head>	
  5. <title>Изменение значения в поле Select</title>	
  6. <script type="text/javascript">	
  7. var regiondb = new Object()	
  8. regiondb["africa"] = [{value:"1", text:"Каир"},	
  9.                       {value:"2", text:"Триполи"},	
  10.                       {value:"3", text:"Алжир"},	
  11.                       {value:"4", text:"Претория"}];	
  12. regiondb["asia"] = [{value:"1", text:"Банкок"},	
  13.                     {value:"2", text:"Дели"},	
  14.                     {value:"3", text:"Улан-Батор"},	
  15.                     {value:"4", text:"Джакарта"},	
  16.                     {value:"5", text:"Токио"}];	
  17. regiondb["australia"] = [{value:"1", text:"Мельбурн"},	
  18.                           {value:"2", text:"Сидней"}];	
  19. regiondb["europe"] = [{value:"1", text:"СПб"},	
  20.                       {value:"2", text:"Лондон"},	
  21.                       {value:"3", text:"Афины"},	
  22.                       {value:"4", text:"Барселона"},	
  23.                       {value:"5", text:"Париж"},	
  24.                       {value:"6", text:"Рим"},	
  25.                       {value:"7", text:"Москва"},	
  26.                       {value:"69", text:"Бабруйск :)"}];	
  27. regiondb["noamer"] = [{value:"1", text:"Нью-Йорк"},	
  28.                       {value:"2", text:"Вашингтон"},	
  29.                       {value:"3", text:"Лос Анджелес"},	
  30.                       {value:"4", text:"Оттава"}];	
  31. regiondb["soamer"] = [{value:"1", text:"Рио дэ Жанейро"},	
  32.                       {value:"2", text:"Лима"},	
  33.                       {value:"3", text:"Каракас"}];	
  34. function setCities(chooser) {	
  35.     var cityChooser = chooser.form.elements["city"];	
  36.     // обнуляем список	
  37.     cityChooser.options.length = 0;	
  38.     // получаем value для массива regiondb	
  39.     var choice = chooser.options[chooser.selectedIndex].value;	
  40.     var db = regiondb[choice];	
  41.     // вставляем первый элемент	
  42.     cityChooser.options[0] = new Option("Город: ", "", true, false);	
  43.     if (choice != "") {	
  44.         for (var i = 0; i < db.length; i++) {	
  45.             cityChooser.options[i + 1] = new Option(db[i].text, db[i].value);	
  46.         }	
  47.     }	
  48. }	
  49. </script>	
  50. </head>	
  51. <body>	
  52. <form name="dealers" action="">	
  53. <select name="continent" onchange="setCities(this)">	
  54.     <option value="" selected>Континент: </option>	
  55.     <option value="africa">Африка</option>	
  56.     <option value="asia">Азия</option>	
  57.     <option value="australia">Австралия</option>	
  58.     <option value="europe">Европа</option>	
  59.     <option value="noamer">С. Америка</option>	
  60.     <option value="soamer">Ю. Америка</option>	
  61. </select>&nbsp;	
  62. <select name="city">	
  63.     <option value="" selected>Город: </option>	
  64. </select>	
  65. </form>	
  66. </body>	
  67. </html>
Клиентская версия решения: за 1 запрос к серверу на страницу грузится вся информация как по первому списку так и по второму. При этом вся эта информация соответственным образом взаимосвязана.

Найдено на forum.vingrad.ru
Тестировалось на: IE 6.0 SP2, Mozilla FF 1.5, Opera 8.5

+добавить реализацию