Написав свой пост 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’;
}
}
Хороши фреймворки, да основы надо знать :)