Динамическое формирование выпадающего списка

Динамическое формирование выпадающего списка

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

Вступление
Линейное заполнение
Формирование еще и optgroup-ов
innerHTML
Все реализации

Вступление

Очень часто при программировании интерактивного функционала веб-интерфейсов возникает задача модификации содержимого выпадающего списка select. В этом процессе следует выделить 2 отдельные подзадачи: это удаление(очищение) выпадающего списка и уже непосредственное динамическое формирование нового содержимого. В этой задаче речь идет о второй части конечно.

Линейное заполнение

Как известно html-элемент выпадающий список может быть 2-х уровневым. Имеются ввиду группирующие элементы optgroup внутри него конечно. Все же наиболее используемый тип списка на большинстве веб-страниц - это просто, линейный список, содержащий только элементы option. Поэтому логично будет помимо универсальной задачи, решить сначала наиболее распрастраненную и используемую задачу - линейное заполнение выпадающего списка.

2 варианта: либо использовать метод add у коллекции options нашего списка, либо косвенно вставлять в коллекцию новые объекты.

Линейное формирование [javascript] ссылка

function Fill() {
    var sel = document.getElementById('mysel');
    for (var i = 0; i < 10; i++){
        var newOpt = new Option("name" + i, "valfield" + i);
        sel.options.add(newOpt);    // Добавление
        // Либо вместо этого так:
        //sel.options[i] = newOpt;  // Косвенное добавление
    }
    return true;
}

function Fill() {
    var sel = document.getElementById('mysel');
    for (var i = 0; i < 10; i++){
        var newOpt = new Option("name" + i, "valfield" + i);
        sel.options.add(newOpt);    // Добавление
        // Либо вместо этого так:
        //sel.options[i] = newOpt;  // Косвенное добавление
    }
    return true;
}

Формирование еще и optgroup-ов

Здесь возникают некоторые особенности. Вот один из вариантов работающего кода:

Универсальное добавление вариант №1 [javascript] ссылка

function Fill2() {
    var sel = document.getElementById('mysel');
 
    // Добавляем optgroup
    var newOptGroup = document.createElement('OPTGROUP');
    newOptGroup.label = 'Наша группа №1';
 
    sel.appendChild(newOptGroup);
 
    // Заполняем его пунктами
    for (var i = 0; i < 10; i++){
        var newOpt = new Option("name" + i, "valfield" + i);
 
        newOpt.innerHTML  = 'punkt' + i;
        newOptGroup.appendChild(newOpt);
 
    }
    return true;
}

function Fill2() {
    var sel = document.getElementById('mysel');
    
    // Добавляем optgroup
    var newOptGroup = document.createElement('OPTGROUP');
    newOptGroup.label = 'Наша группа №1';
    
    sel.appendChild(newOptGroup);
    
    // Заполняем его пунктами
    for (var i = 0; i < 10; i++){
        var newOpt = new Option("name" + i, "valfield" + i);

        newOpt.innerHTML  = 'punkt' + i;
        newOptGroup.appendChild(newOpt);
        
    }
    return true;
}

Одна из особенностей состоит в том, что название элементов, присваиваемое в строке 12(первый параметр конструктора) - не формируется, что бы там ни стояло. Поэтому в 14-ой строке и идет принудительное выставление этого названия через innerHTML.

Второй момент - это то, что у элемента optgroup нет уже никакой коллекции options, как логично можно б было предположить. Вложенные в него элементы option помещаются лишь в DOM-кую коллекцию childNodes. Поэтому и использовать здесь можно только appendChild а не что-либо еще.

Ну и другой вариант, отличающийся тем, что создание option-ов делается через createElement, что приводит к более однообразному коду:

Универсальное добавление вариант №2, более красивый случай [javascript] ссылка

function Fill2() {
    var sel = document.getElementById('mysel');
 
    // Добавляем optgroup
    var newOptGroup = document.createElement('OPTGROUP');
    newOptGroup.label = 'Наша группа №1';
 
    sel.appendChild(newOptGroup);
 
    // Заполняем его пунктами
    for (var i = 0; i < 10; i++){
        var newOpt = document.createElement('OPTION');
 
        newOpt.value      = 'value' + i;
        newOpt.innerHTML  = 'punkt' + i;
        newOptGroup.appendChild(newOpt);
 
    }
    return true;
}

function Fill2() {
    var sel = document.getElementById('mysel');
    
    // Добавляем optgroup
    var newOptGroup = document.createElement('OPTGROUP');
    newOptGroup.label = 'Наша группа №1';
    
    sel.appendChild(newOptGroup);
    
    // Заполняем его пунктами
    for (var i = 0; i < 10; i++){
        var newOpt = document.createElement('OPTION');
        
        newOpt.value      = 'value' + i;
        newOpt.innerHTML  = 'punkt' + i;
        newOptGroup.appendChild(newOpt);
        
    }
    return true;
}

innerHTML

Формирование списка через заполнение его свойства innerHTML - невозможно: браузер почему-то обрезает первый открывающий тег .

Реализации:

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

1) Линейное заполнение на javascript, code #96[автор:this]
2) Универсальное заполнение, вариант №1 на javascript, code #97[автор:this]

Динамическое заполнение выпадающего списка выбора (SELECT), вариант №1 ссылка |режим:

<html>
<head>
    <title>Drop Down List Tests</title>
</head>
 
<body>
 
<select id="mysel">
 
</select>
<input type="button" value="Fill Select" onclick="return Fill();">
 
<script language="javascript">
function Fill() {
    var sel = document.getElementById('mysel');
 
    // Добавляем optgroup
    var newOptGroup = document.createElement('OPTGROUP');
    newOptGroup.label = 'Наша группа №1';
 
    sel.appendChild(newOptGroup);
 
    // Заполняем его пунктами
    for (var i = 0; i < 10; i++){
        var newOpt = new Option("name" + i, "valfield" + i);
 
        newOpt.innerHTML  = 'punkt' + i;
        newOptGroup.appendChild(newOpt);
 
    }
    return true;
}
</script>
</body>
</html>

<html>
<head>
    <title>Drop Down List Tests</title>
</head>

<body>

<select id="mysel">

</select>
<input type="button" value="Fill Select" onclick="return Fill();">

<script language="javascript">
function Fill() {
    var sel = document.getElementById('mysel');
    
    // Добавляем optgroup
    var newOptGroup = document.createElement('OPTGROUP');
    newOptGroup.label = 'Наша группа №1';
    
    sel.appendChild(newOptGroup);
    
    // Заполняем его пунктами
    for (var i = 0; i < 10; i++){
        var newOpt = new Option("name" + i, "valfield" + i);

        newOpt.innerHTML  = 'punkt' + i;
        newOptGroup.appendChild(newOpt);
        
    }
    return true;
}
</script>
</body>
</html>

Показывает как можно заполнить выпадающий список если используются еще и optgroup.

В строке 27 - принудительное выставление названия пунктов, т.к. при инициализации нового объекта Option (стр. 25) - это значение не сохраняется.

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

3) Универсальное заполнение, вариант №2 на javascript, code #98[автор:this]

Динамическое заполнение выпадающего списка выбора (SELECT), наиболее предпочтительный вариант ссылка |режим:

<html>
<head>
    <title>Drop Down List Tests</title>
</head>
 
<body>
 
<select id="mysel">
 
</select>
<input type="button" value="Fill Select" onclick="return Fill();">
 
<script language="javascript">
function Fill() {
    var sel = document.getElementById('mysel');
 
    // Добавляем optgroup
    var newOptGroup = document.createElement('OPTGROUP');
    newOptGroup.label = 'Наша группа №1';
 
    sel.appendChild(newOptGroup);
 
    // Заполняем его пунктами
    for (var i = 0; i < 10; i++){
        var newOpt = document.createElement('OPTION');
 
        newOpt.value      = 'value' + i;
        newOpt.innerHTML  = 'punkt' + i;
        newOptGroup.appendChild(newOpt);
 
    }
    return true;
}
</script>
</body>
</html>

<html>
<head>
    <title>Drop Down List Tests</title>
</head>

<body>

<select id="mysel">

</select>
<input type="button" value="Fill Select" onclick="return Fill();">

<script language="javascript">
function Fill() {
    var sel = document.getElementById('mysel');
    
    // Добавляем optgroup
    var newOptGroup = document.createElement('OPTGROUP');
    newOptGroup.label = 'Наша группа №1';
    
    sel.appendChild(newOptGroup);
    
    // Заполняем его пунктами
    for (var i = 0; i < 10; i++){
        var newOpt = document.createElement('OPTION');
        
        newOpt.value      = 'value' + i;
        newOpt.innerHTML  = 'punkt' + i;
        newOptGroup.appendChild(newOpt);
        
    }
    return true;
}
</script>
</body>
</html>

Показывает как можно заполнить выпадающий список если используются еще и optgroup.

Наиболее "красивый" вариант, поскольку и optgroup и option формируются одинаково через createElement

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

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

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

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

Динамическое формирование выпадающего списка

Вступление

Линейное заполнение

Формирование еще и optgroup-ов

innerHTML

Реализации: