Javascript выпадающий список

Часто на форумах втречаются вопросы как сделать динамический Javascript выпадающий список? Да ещё с возможностью установки начального значения. В этой статье я приведу простенькую функцию для создания динамического выпадающего списка.

Итак прежде всего какую задачу мы перед собой поставим?

1. Входные данные для элементов option

2. Задание выбранного элемента

3. Минимум кода

4. Минимум глобальных переменных

5. Простота в использовании

Для первого пункта, если не заморачиваться с JSON (так, как в нашем случае сама стрктура получиться сложной), то можно в качестве входных данных для нашего выпадающего списка, взять некую структуру вложенных массивов например такую:

// Входной массив данных:
var optionsArray = [ 
                     ["-- Выберете фигуру --","0"],
                     ["Прямоугольник","rectangle"],
                     ["Круг","circle"],
                     ["Квадрат","square"]
                   ];

Начнем писать саму функцию. Особо не мудрствуя, я назвал её BuildSelect принимать она у нас будет три аргумента:

1. Массив для создания элментов option (пример выше) - выпадающего списка.

2. HTMLElement - элемент select выбранный к примеру через document.getElementById.

3. Значение эелемента, выбранного по - умолчанию.

Основная фишка функции в создании и добавлении нового элемента option выпадающего списка. Создаются они с помощью конструктора: new Option(htmlText, value) - принимает 2 аргумента, как не сложно догадаться первый - это как будет называться пункт выпадающего списка, а второй это его значние.

Добавляются новые элементы option в элемент select при помощи метода add(option, index) - последнего. Методу add() требуется два аргумент: первый - это сам элемент option, созданный при помощи конструктора new Option, а второй это индекс для этого самого элемента.

По сути всё просто, и основная работа по построению динамического, выпадающего списка сводится к обработке массива:

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

if ( typeof(window.BuildSelect) !== "function" ) {

    function BuildSelect(/*array*/inputsArr, /*HTMLElement*/htmlSelect, /*string*/selected) {
      var length = inputsArr.length,
          opt = null,
          i = 0;
          
      for ( ; i < length; i += 1 ) { 
        // Создаём новый элемент option с помощью конструктора:
        opt = new Option( inputsArr[i][0], inputsArr[i][1] );
        // Проверяем, если текущий элемент соответствует 3-му аргументу...		
        if( inputsArr[i][1] === selected ) {
          // то помечаем его как выбранный:
          opt.selected = "selected";
        }
        // Добавляем элемент option в элемент select:
        htmlSelect.options.add( opt, i );
      }
      return true;
    } 
}

В итоге имеем всего одну глобальную переменную - имя функции. Если считать без комментариев, то уложились всего в 17 строчек кода. А подключить можно так:

var optionsArray = [ 
                     ["-- Выберете фигуру --","0"],
                     ["Прямоугольник", "rectangle"],
                     ["Круг", "circle"],
                     ["Квадрат", "square"]
                   ];
                   
window.onload = function() {
  BuildSelect( optionsArray, document.getElementById("bass_form"), "rectangle" );
}

Ну, а в html коде нам понадобиться только сам элемент select:

<select id="bass_form"></select>

Ну, что ж, похоже, что со всеми задачами, поставленными нами, в процессе построения функции для создания динамического выпадающего списка - мы справились! Всегда бы так