Полезное для программистов:

Фриланс
Новости
Статьи
   
Рубрики:

Error. Page cannot be displayed. Please contact your service provider for more details. (11)


Изменение значения в списке select

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

Решение:
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Изменение значения в поле Select (c) Aliance</title>
<script type="text/javascript">

var regiondb = new Object()
regiondb["africa"] = [{value:"1", text:"Каир"},
                      {value:"2", text:"Триполи"},
                      {value:"3", text:"Алжир"},
                      {value:"4", text:"Претория"}];
regiondb["asia"] = [{value:"1", text:"Банкок"},
                    {value:"2", text:"Дели"},
                    {value:"3", text:"Улан-Батор"},
                    {value:"4", text:"Джакарта"},
                    {value:"5", text:"Токио"}];
regiondb["australia"] = [{value:"1", text:"Мельбурн"},
                          {value:"2", text:"Сидней"}];
regiondb["europe"] = [{value:"1", text:"СПб"},
                      {value:"2", text:"Лондон"},
                      {value:"3", text:"Афины"},
                      {value:"4", text:"Барселона"},
                      {value:"5", text:"Париж"},
                      {value:"6", text:"Рим"},
                      {value:"7", text:"Москва"},
                      {value:"69", text:"Бабруйск :)"}];
regiondb["noamer"] = [{value:"1", text:"Нью-Йорк"},
                      {value:"2", text:"Вашингтон"},
                      {value:"3", text:"Лос Анджелес"},
                      {value:"4", text:"Оттава"}];
regiondb["soamer"] = [{value:"1", text:"Рио дэ Жанейро"},
                      {value:"2", text:"Лима"},
                      {value:"3", text:"Каракас"}];

function setCities(chooser) {
    var cityChooser = chooser.form.elements["city"];
    // обнуляем список
    cityChooser.options.length = 0;
    // получаем value для массива regiondb
    var choice = chooser.options[chooser.selectedIndex].value;
    var db = regiondb[choice];
    // вставляем первый элемент
    cityChooser.options[0] = new Option("Город: ", "", true, false);
    if (choice != "") {
        for (var i = 0; i < db.length; i++) {
            cityChooser.options[i + 1] = new Option(db[i].text, db[i].value);
        }
    }
}

</script>
</head>
<body>
<form name="dealers" action="">
<select name="continent" onchange="setCities(this)">
    <option value="" selected>Континент: </option>
    <option value="africa">Африка</option>
    <option value="asia">Азия</option>
    <option value="australia">Австралия</option>
    <option value="europe">Европа</option>
    <option value="noamer">С. Америка</option>
    <option value="soamer">Ю. Америка</option>
</select>&nbsp;
<select name="city">
    <option value="" selected>Город: </option>
</select>
</form>
</body>
</html>


Обсуждение:
Имеем 2 элемента select, предоставляющий объекты HTMLSelectElement.
По событию onchange вызываем функцию setCities(), принимающую аргумент chooser, являющийся ссылкой на этот самый объект HTMLSelectElement первого элемента select (this).
Далее читаем выбранное значение:
Код

var choice = chooser.options[chooser.selectedIndex].value;

Далее вставляем первый неизменный дочерний элемент option:
Код

cityChooser.options[0] = new Option("Город: ", "", true, false);


А далее из массива regiondb["выбранный_континент"] читаем значение, в виде объекта с 2 полями - value и text, и соответственно в цикле for их подставляем.

Все.
Автор: Aliance
Сайт: http://www.jsguide.spb.ru






Просмотров: 5107

 

 

Новые статьи:


Популярные:
  1. Как сделать цикличным проигрывание MIDI-файла?
  2. Создание AVI файла из рисунков
  3. Как устройство "отключить в данной конфигурации"?
  4. Kто в данный момент присоединен через Сеть?
  5. Как узнать количество доступной памяти?
  6. Как реализовать в RichEdit разноцветный текст?
  7. Как скрыть свое приложение от ProcessViewer
  8. Как программно нажать/скрыть/показ кнопку "Start"?
  9. Модуль работы с ресурсами в PE файлах
10. Функции вызова диалоговых окон выбора
11. Проверка граматики средствами Word'а из Delphi.
12. Модуль для упрощенного вызова сообщений
13. Функции для записи и чтение своих данных в, ЕХЕ- файле
14. Рекурсивный просмотр директорий
15. Network Traffic Monitor
16. Разные модули
17. Универсальная функция для обращения к любым экспортируем функциям DLL
18. Библиотека от VladS
19. Протектор для UPX'а
20. Еще об ICQ, сообщения по контакт листу?
21. Использование открытых интерфейсов
22. Теория и практика использования RTTI
23. Работа с TApplication
24. Примеры использования Drag and Drop для различных визуальных компонентов
25. Что такое порт? Правила для работы с портами
26. Симфония на клавиатуре
27. Загрузка DLL
28. Исправление автоинкремента
29. Взаимодействие с чужими окнами
30. Проверить дубляжи в столбце


 

 

 
 
На главную