Задача: Заполнение 2-го выпадающего списка (select) в соответствии с выбором в первом
Исходник: Заполнение 2-го выпадающего списка (select) в соответствии с выбором в первом, язык: javascript [code #143, hits: 6505]
автор: - [добавлен: 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

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