Готовые Javascript (jQuery) примеры

Написав свой пост 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’;
    }
}

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

Спонсор поста — World Programs — разработка ПО