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

Aliance

Дата 19.9.2005, 23:56 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

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

Решение:

Код


<!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 их подставляем.

Все.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »