Написав свой пост jQuery примеры, я задумался о том,
что некоторые начинающие разработчики сразу берутся за изучение какого-либо javascript framework’a
без нормальных знаний чистого javascript. Это не есть хорошо, поэтому я буду приводить примеры не только на jQuery, но и на чистом джаваскрипте.

И так, приступим.

Работа с выпадающим списком на чистом javascript

Перечислим список основного, что нужно знать при работе с выпадающим списком:

Элемент select:

• select имеет коллекцию элементов option (свойство select.options). Данное свойство представляет собой массив,
  к элементам которого можно обратиться по индексу
• количество options в select хранит свойство select.length или select.options.length
• свойство select.selectedIndex содержит индекс текущего выбранного элемента option
• свойство select.value содержит значение выбранного элемента option
• выпадающий список с множественным выбором можно сделать используя атрибут multiple=”multiple”

Элемент option:

• option.value - значение элемента
• option.index - индекс элемента в коллекции HTMLOptionsCollection
• option.selected - атрибут, который показывает состояние элемента выбран/не выбран
• option.disabled - атрибут, который отвечает состояние элемента доступен/не доступен

У нас есть все тот же HTML элемент <select>:

<select id=“sel“ name=“sel“>
  <option value=“0“>zero</option>
  <option value=“1“>one</option>
  <option value=“2“>two</option>
  <option value=“3“>three</option>
</select>

1. Получить значение выбранного элемента

var value = document.getElementById(’sel’).value

2. Получить текст выбранного элемента

var sel = document.getElementById(’sel’);
var text = sel.options[sel.selectedIndex].text;

3. Добавить элемент в конец списка

var sel = document.getElementById(’sel’);
// создаем элемент option
var opt = document.createElement(‘option’);
// определяем значение и текст нового элемента
opt.value = 4;
opt.innerHTML = ‘four’;
// добавляем option в конец select
sel.appendChild(opt);

4. Добавить элемент в начало списка
Действия аналогичны предыдущему примеру, за исключением использования функции insertBefore

var sel = document.getElementById(’sel’);
var opt = document.createElement(‘option’);
opt.value = -1;
opt.innerHTML = ‘minus’;
sel.insertBefore(opt, sel.options[0]);

5. Вставить элемент после заданного элемента (после второго)

var sel = document.getElementById(’sel’);
var opt = document.createElement(‘option’);
opt.value = 7;
opt.innerHTML = ‘inserted’;
sel.insertBefore(opt, sel.options[2]);

6. Удалить выбранный элемент

var sel = document.getElementById(’sel’);
sel.removeChild(sel.options[sel.selectedIndex]);

7. Очистить select

var sel = document.getElementById(’sel’);
var nodes = sel.childNodes;
var len = nodes.length;
for (var i=len-1; i>=0; i–)
{
    sel.removeChild(nodes[i]);
}

8. Сделать элемент выбранным (последний)

var sel = document.getElementById(’sel’);
// вариант №1: через установку атрибута для option
sel.options[sel.length - 1].setAttribute(’selected’, ’selected’);
// вариант №2: используя свойство selectedIndex для select
sel.selectedIndex = sel.length - 1;

9. Сделать элемент недоступным (первый)

var sel = document.getElementById(’sel’);
sel.options[0].setAttribute(‘disabled’, ‘disabled’);

10. Изменить цвет текста всех элементов, кроме выбранного

var sel = document.getElementById(’sel’);
for(var i=0; i<sel.length; i++)
{
    if (i != sel.selectedIndex) {
        sel.options[i].style.color = ‘red’;
    }
}

Хороши фреймворки, да основы надо знать :)