HTML
СтатьиJavaScript SELECT - динамические списки"Как реализовать следующее: есть два HTML списка select, нужно динамически с помощью Javascript заполнить второй список по значению, выбранному в первом? И если я таких селектов связанных захочу много, а не два?" - эти вопросы были вчера заданы мне по аське и подвигли меня к написанию этой статьи... Как это выглядит снаружи
Выбираете в первом списке браузер, при этом второй список заполняется названиями ОС на которых браузер работает, а исходя из значения второго списка, заполняется третий список, содержащий доступные версии браузера. Работаем с SELECT из Javascript (что и как)
Для решения поставленной задачи необходимо иметь понятие о том как воздействовать на элемент Пусть у нас на странице есть элемент:
<FORM name="myForm">
<select id="mySelectId" name="mySelect">
<option value="str0"> Строка списка 0 </option>
<option value="str1"> Строка списка 1 </option>
<option value="str2"> Строка списка 2 </option>
</select>
</FORM>
Как видно,
Для обращения к нашему элементу списка будем использовать DOM метод
var objSel = document.getElementById("mySelectId");
Если список находится внутри формы, то к нему можно обратиться и через форму: var objSel = document.myForm.mySelect;
где, Как добавить новый элемент в список SELECT?
Все HTML элементы
var objSel = document.getElementById("mySelect");
//Создаем новый объект Option и заносим его в коллекцию options
objSel.options[0] = new Option("Строка списка 0", "str0");
objSel.options[1] = new Option("Строка списка 1", "str1");
objSel.options[2] = new Option("Строка списка 2", "str2");
Добавлять элементы в конец списка удобно так:
objSel.options[objSel.options.length] = new Option("текст", "значение");
Свойство objSel.options.length=1; //добавляем в конец списка пустой элемент objSel.options[0].text = "Строка списка 0"; objSel.options[0].value = "str0";
Вернемся к функции-конструктору
var newOpt = new Option("text", "value", isDefaultSelected, isSelected);
где первые два аргумента - это строки, а третий и червертый булевы аргументы и принимают значения До сих пор для добавления элемента мы использовали BOM (Browser Object Model / объектная модель браузера), однако лучше, во всех отношениях, использовать методы DOM (Document Object Model / объектная модель документа), и реализовывать добавление элемента так:
function addOption (oListbox, text, value, isDefaultSelected, isSelected)
{
var oOption = document.createElement("option");
oOption.appendChild(document.createTextNode(text));
oOption.setAttribute("value", value);
if (isDefaultSelected) oOption.defaultSelected = true;
else if (isSelected) oOption.selected = true;
oListbox.appendChild(oOption);
}
Пример использования:
var objSel = document.getElementById("mySelect");
addOption(objSel, "текст", "значение", true);
И на последок о некоторых особенностях IE :-) В IE 5+ исключена (ввиду нестабильной работы) возможность добавления элемента списка через Доступ к элементам спискаvar text = objSel.options[2].text; var value = objSel.options[2].value; Элементы списка в массиве options индексируются с нуля, поэтому первый элемент списка имеет индекс 0:
Изменение элемента списка
objSel.options[1].text = "Новый текст";
objSel.options[1].value = "новое значение";
objSel.options[2] = new Option("Новый текст", "новое значение");//полная замена элемента на новый
Как узнать какой элемент выбран и как выбрать нужный элемент?
У объекта элемента
if ( objSel.selectedIndex != -1)
{
//Если есть выбранный элемент, отобразить его значение (свойство value)
alert(objSel.options[objSel.selectedIndex].value);
}
Замечание
Возможен выбор нескольких значений в списке, для этого нужно указать свойство
В случае когда доступен множественный выбор элементов, данное свойство содержит индекс первого выделенного в списке элемента (т.е. того элемента который в списке находиться выше). Чтобы в данном случае найти все выделенные элементы нужно перебрать в цикле все элементы массива options и проверить их свойство
function getSelectedIndexes (oListbox)
{
var arrIndexes = new Array;
for (var i=0; i < oListbox.options.length; i++)
{
if (oListbox.options[i].selected) arrIndexes.push(i);
}
return arrIndexes;
};
Функция Пример использования (отображение индексов выделеных элементов):
var objSel = document.getElementById("mySelect");
alert ( getSelectedIndexes(objSel) );
Описанные свойства //выбрать (выделить) второй элемент списка objSel.selectedIndex = 1; //или так objSel.options[1].selected=true;
Для выбора нескольких элементов (при установленном свойстве //выбрать (выделить) 1 и 3 элементы списка objSel.options[0].selected=true; objSel.options[2].selected=true;
Следует обратить внимание на баг в браузере Opera, проявляющийся при динамическом заполнении списка через скрипт и последующей установке выделенного пункта через свойство
var objSel = document.getElementById("mySelect");
//Динамически создаем элементы списка
objSel.options[0] = new Option("Строка списка 0", "str0");
objSel.options[1] = new Option("Строка списка 1", "str1");
//Выделяем второй элемент списка
setTimeout( function(){objSel.options[1].selected=true;}, 1 );
Удаление i-го элемента спискаobjSel.options[1] = null; //удалить элемент списка с индексом 1 (второй элемент списка) Или используя DOM метод remove: oListbox.remove(0); //удалить первый элемент списка Как очистить список SELECT (как удалить все элементы списка)?
Для этого можно установить свойство objSel.options.length = 0;
Либо вызвать DOM метод
function clearSelect(oListbox)
{
for (var i=oListbox.options.length-1; i >= 0; i--)
{
oListbox.remove(i);
}
};
Как сдвинуть элемент списка вверх или вниз?
function shiftUpOption (oListbox, iIndex)
{
if (iIndex > 0)
{
var oOption = oListbox.options[iIndex];
var oPrevOption = oListbox.options[iIndex-1];
oListbox.insertBefore(oOption, oPrevOption);
}
};
function shiftDownOption (oListbox, iIndex)
{
if (iIndex < oListbox.options.length - 1)
{
var oOption = oListbox.options[iIndex];
var oNextOption = oListbox.options[iIndex+1];
oListbox.insertBefore(oNextOption, oOption);
}
};
Примеры:
var objSel = document.getElementById("mySelect");
shiftDownOption (objSel, 1); //переместить второй элемент списка (с индектом 1) на первую позицию (с индексом 0)
Динамические связанные списки Select - взгляд изнутри
Ну что же, теперь вы знаете достаточно, чтобы выполнить практически любую задачу связанную с элементом
<html>
<head>
<title>Связанные селекты</title>
<!-- Подключаем javascript-библиотеку функций -->
<script type="text/javascript" src="linkedselect.js"></script>
</head>
<body>
<!-- Первый (главный) список (изначально заполнен вручную) -->
<select size="4" id="List1">
<option value="ie"> Internet Explorer </option>
<option value="safari"> Safari </option>
</select>
<!-- Подчиненный список 1 (изначально пуст) -->
<select size="4" id="List2"></select>
<!-- Подчиненный список 2 (изначально пуст) -->
<select size="4" id="List3"></select>
<script type="text/javascript">
// Создаем новый объект связанных списков
var syncList1 = new syncList;
// Определяем значения подчиненных списков (2 и 3 селектов)
syncList1.dataList = {
/* Определяем элементы второго списка в зависимости
от выбранного значения в первом списке */
'ie':{
'ie_win':'Windows',
'ie_mac':'Mac'
},
'safari':{
'safari_mac':'Mac'
},
/* Определяем элементы третьего списка в зависимости
от выбранного значения во втором списке */
'ie_win':{
'ie_win_5':'версия 5',
'ie_win_6':'версия 6'
},
'ie_mac':{
'ie_mac_5':'версия 5'
},
'safari_mac':{
'safari_mac_1':'версия 1',
'safari_mac_2':'версия 2'
}
};
// Включаем синхронизацию связанных списков
syncList1.sync("List1","List2","List3");
</script>
</body>
</html>
Давайте разберем страницу. Первым делом в разделе head подключаем библиотеку linkedselect.js, которая определяет класс объектов
Автор: Игорь Цыгырлаш |
||
