Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.09.2009, 22:38
Аватар для PavelDart
Новичок на форуме
Отправить личное сообщение для PavelDart Посмотреть профиль Найти все сообщения от PavelDart
 
Регистрация: 09.09.2009
Сообщений: 1

динамическое заполнение 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="Инф.Сист и Тех.">Инф.Сист&nbsp;и&nbsp;Тех.</option>
	<option value="Менеджмент">Менеджмент</option>
	<option value="Бух.Учёт">Бух.Учёт</option>
</select>

&nbsp;Дом:
<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="Инф.Сист и Тех.">Инф.Сист&nbsp;и&nbsp;Тех.</option>
	<option value="Менеджмент">Менеджмент</option>
	<option value="Бух.Учёт">Бух.Учёт</option>
</select>

&nbsp;форма:
<select name="house" onChange="MkHouseValues2(this.selectedIndex)"
<option value="N/A">N/A</option>
</select>

&nbsp;группа:
<select name="gruppa">
<option value="N/A">N/A</option>
</select>
</form> 


</body>
</html>
Думаю, видно что я не стал особо мудровствовать и дополнил код копией изначального кода с изменением названий переменных, ну и подключив их куда следует.
В итоге не работает. По справчинику проверял свойства и функции - вроде бы всё нормально.
Ответить с цитированием
  #2 (permalink)  
Старый 10.09.2009, 10:16
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

Вай как много букаааф....
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
AJAX - заполнение select - неправильно работает в Mozilla 5.0 С.Тарасов AJAX и COMET 0 17.06.2009 00:58
заполнить select значениями другого select Central Элементы интерфейса 1 30.05.2009 14:41
событие на выпадение-скрытие списка select Aderba jQuery 1 03.04.2009 21:51
Динамическое обновление списка select (продолжение мытарств) macam Элементы интерфейса 2 25.06.2008 16:04
Динамическое обновление списка Select Fender Events/DOM/Window 3 12.06.2008 21:30