|
динамическое заполнение SELECT
Приветствую всех. Возникла проблема с динамическим отображение информации в select. Всего элементов три. Выбираю в первом вып. меню значение - генерится список во втором выподающем меню, выбираю во втором - генерится в третьем. С первыми двумя проблем нет. Вариант со всеми тремя не работает.
Начальный вариант с двумя select:
|
Код:
|
<html>
<script type="text/javascript">
// далее у нас следует массив из улиц, содержащих дома, разделённые запятой
var aHouseValues = new Array(
"дневное,днев-уск,вечвернее,веч-уск",
"дневное,днев-уск,вечвернее,веч-уск",
"дневное,днев-уск,вечвернее,веч-уск,экстернат",
"дневное,вечернее,веч-уск,экстернат"
);
// ф-ция, возвращающая массив домов по заданной улице
function getHouseValuesByStreet(index){
var sHouseValues = aHouseValues[index];
return sHouseValues.split(","); // преобразуем строку в массив домов
}
// главная ф-ция, выводящая динамически список домов
function MkHouseValues(index)
{
var aCurrHouseValues = getHouseValuesByStreet(index);
var nCurrHouseValuesCnt = aCurrHouseValues.length;
var oHouseList = document.forms["address"].elements["house"];
var oHouseListOptionsCnt = oHouseList.options.length;
oHouseList.length = 0; // удаляем все элементы из списка домов
for (i = 0; i<nCurrHouseValuesCnt; i++)
{
// далее мы добавляем необходимые дома в список
if (document.createElement)
{
var newHouseListOption = document.createElement("OPTION");
newHouseListOption.text = aCurrHouseValues[i];
newHouseListOption.value = aCurrHouseValues[i];
// тут мы используем для добавления элемента либо метод IE, либо DOM, которые, alas, не совпадают по параметрам…
(oHouseList.options.add) ? oHouseList.options.add(newHouseListOption) : oHouseList.add(newHouseListOption, null);
}
else
{
// для NN3.x-4.x
oHouseList.options[i] = new Option(aCurrHouseValues[i], aCurrHouseValues[i], false, false);
}
}
}
// инициируем изменение элементов в списке домов, в зависимости от текущей улицы
MkHouseValues(document.forms["address"].elements["street"].selectedIndex);
</script>
<head>
<title></title>
<meta name="GENERATOR" content="Quanta Plus">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
Сама форма в нашем примере выглядит так:
<form name="address" action="#">
Улица:
<select name="street" onChange="MkHouseValues(this.selectedIndex)">
<option value="Самолётостроение">Самолётостроение</option>
<option value="Инф.Сист и Тех.">Инф.Сист и Тех.</option>
<option value="Менеджмент">Менеджмент</option>
<option value="Бух.Учёт">Бух.Учёт</option>
</select>
Дом:
<select name="house">
<option value="N/A">N/A</option>
</select>
</form>
</body>
</html> |
Вот вариант с тремя элементами:
|
Код:
|
<html>
<script type="text/javascript">
// далее у нас следует массив из улиц, содержащих дома, разделённые запятой
var aHouseValues = new Array(
"дневное,днев-уск,вечвернее,веч-уск",
"дневное,днев-уск,вечвернее,веч-уск",
"дневное,днев-уск,вечвернее,веч-уск,экстернат",
"дневное,вечернее,веч-уск,экстернат"
);
var bHouseValues = new Array(
"1,2,3,4",
"5,6,7,8",
"09,10,11,12",
"13,14,15,16"
);
// ф-ция, возвращающая массив домов по заданной улице
function getHouseValuesByStreet(index)
{
var sHouseValues = aHouseValues[index];
return sHouseValues.split(","); // преобразуем строку в массив домов
}
function getHouseValuesByStreet2(index)
{
var suHouseValues = bHouseValues[index];
return suHouseValues.split(","); // преобразуем строку в массив домов
}
// главная ф-ция, выводящая динамически список домов
function MkHouseValues(index)
{
var aCurrHouseValues = getHouseValuesByStreet(index);
var nCurrHouseValuesCnt = aCurrHouseValues.length;
var oHouseList = document.forms["address"].elements["house"];
var oHouseListOptionsCnt = oHouseList.options.length;
oHouseList.length = 0; // удаляем все элементы из списка домов
for (i = 0; i<nCurrHouseValuesCnt; i++)
{
// далее мы добавляем необходимые дома в список
if (document.createElement)
{
var newHouseListOption = document.createElement("OPTION");
newHouseListOption.text = aCurrHouseValues[i];
newHouseListOption.value = aCurrHouseValues[i];
// тут мы используем для добавления элемента либо метод IE, либо DOM, которые, alas, не совпадают по параметрам…
(oHouseList.options.add) ? oHouseList.options.add(newHouseListOption) : oHouseList.add(newHouseListOption, null);
}
else
{
// для NN3.x-4.x
oHouseList.options[i] = new Option(aCurrHouseValues[i], aCurrHouseValues[i], false, false);
}
}
}
function MkHouseValues2(index)
{
var auCurrHouseValues = getHouseValuesByStreet2(index);
var nuCurrHouseValuesCnt = auCurrHouseValues.length;
var ouHouseList = document.forms["address"].elements["gruppa"];
var ouHouseListOptionsCnt = ouHouseList.options.length;
ouHouseList.length = 0; // удаляем все элементы из списка домов
for (i = 0; i<nuCurrHouseValuesCnt; i++)
{
// далее мы добавляем необходимые дома в список
if (document.createElement)
{
var nuewHouseListOption = document.createElement("OPTION");
nuewHouseListOption.text = auCurrHouseValues[i];
nuewHouseListOption.value = auCurrHouseValues[i];
// тут мы используем для добавления элемента либо метод IE, либо DOM, которые, alas, не совпадают по параметрам…
(ouHouseList.options.add) ? ouHouseList.options.add(nuewHouseListOption) : ouHouseList.add(nuewHouseListOption, null);
}
else
{
// для NN3.x-4.x
ouHouseList.options[i] = new Option(auCurrHouseValues[i], auCurrHouseValues[i], false, false);
}
}
}
// инициируем изменение элементов в списке домов, в зависимости от текущей улицы
MkHouseValues(document.forms["address"].elements["street"].selectedIndex);
MkHouseValues2(document.forms["address"].elements["house"].selectedIndex);
</script>
<head>
<title></title>
<meta name="GENERATOR" content="Quanta Plus">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
Выберите вашу группу:
<form name="address" action="#">
Специальность:
<select name="street" onChange="MkHouseValues(this.selectedIndex)">
<option value="Самолётостроение">Самолётостроение</option>
<option value="Инф.Сист и Тех.">Инф.Сист и Тех.</option>
<option value="Менеджмент">Менеджмент</option>
<option value="Бух.Учёт">Бух.Учёт</option>
</select>
форма:
<select name="house" onChange="MkHouseValues2(this.selectedIndex)"
<option value="N/A">N/A</option>
</select>
группа:
<select name="gruppa">
<option value="N/A">N/A</option>
</select>
</form>
</body>
</html> |
Думаю, видно что я не стал особо мудровствовать и дополнил код копией изначального кода с изменением названий переменных, ну и подключив их куда следует.
В итоге не работает. По справчинику проверял свойства и функции - вроде бы всё нормально.
|
