Заполнение 2-го выпадающего списка (select) в соответствии с выбором в первом

Заполнение 2-го выпадающего списка (select) в соответствии с выбором в первом

Aвтор:this
Дата: 23.05.2006
Просмотров: 47481
реализации(javascript: 1шт...) +добавить

Достаточно распрастраненная задача также часто решаемая на клиентской (javascript) стороне как и на серверной (путем перезагрузки страницы с передачей через url дополнительной информации).

Пример. Есть 2 списка: список стран и список городов каждой страны. При смене страны в первой списке - нужно обновлять список городов во 2-ом списке. Данная задача предлагает такой клиентский вариант ее реализации.

На html-страницу за единственный запрос грузится информация по всем странам и по всем городам (с привязкой к соответствующим странам). В javascript эта информация записывается в виде вложенного, структурированного объекта(хеша). Первый уровень - идентификаторы стран. В них - массив из объектов-городом. Каждый такой объект - тоже соответственно хеш из идентификатора(value) города и его названия(text).

При смене значения в первом списке стран - мы:

Очищаем второй список городов
Добавляем туда новые элементы из массива объектов городов, который соответствует выбранному в первом списке идентификатору страны.

Реализации:

javascript(1) +добавить

1) Заполнение 2-го выпадающего списка (select) в соответствии с выбором в первом на javascript, code #143[автор:-]

Клиентская версия: заполнение 2-го выпадающего списка (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</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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 	
  "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">	
<html>	
<head>	
<title>Изменение значения в поле Select</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>

Клиентская версия решения: за 1 запрос к серверу на страницу грузится вся информация как по первому списку так и по второму. При этом вся эта информация соответственным образом взаимосвязана.

Найдено на forum.vingrad.ru

Тестировалось на: IE 6.0 SP2, Mozilla FF 1.5, Opera 8.5

<< назад наверх

*	можно кириллицей (недопустимые символы:?&+=\/%#)
**	только для зарегистрированных пользователей

Популярные задачи:

Заполнение 2-го выпадающего списка (select) в соответствии с выбором в первом

Реализации: