Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   динамическое заполнение SELECT (https://javascript.ru/forum/dom-window/5032-dinamicheskoe-zapolnenie-select.html)

PavelDart 09.09.2009 22:38

динамическое заполнение 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>

Думаю, видно что я не стал особо мудровствовать и дополнил код копией изначального кода с изменением названий переменных, ну и подключив их куда следует.
В итоге не работает. По справчинику проверял свойства и функции - вроде бы всё нормально.

B~Vladi 10.09.2009 10:16

Вай как много букаааф....


Часовой пояс GMT +3, время: 04:15.