Готовые Javascript (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>:

<span style="color: #7f0055;">&lt;</span><span style="font-weight: bold; color: #7f0055;">select</span> id=<span style="color: #2a00ff;">“</span><span style="color: #2a00ff;">sel</span><span style="color: #2a00ff;">“</span> name=<span style="color: #2a00ff;">“</span><span style="color: #2a00ff;">sel</span><span style="color: #2a00ff;">“</span><span style="color: #7f0055;">&gt;</span>
  <span style="color: #7f0055;">&lt;</span><span style="font-weight: bold; color: #7f0055;">option</span> value=<span style="color: #2a00ff;">“</span><span style="color: #2a00ff;">0</span><span style="color: #2a00ff;">“</span><span style="color: #7f0055;">&gt;</span>zero<span style="color: #7f0055;">&lt;/</span><span style="font-weight: bold; color: #7f0055;">option</span><span style="color: #7f0055;">&gt;</span>
  <span style="color: #7f0055;">&lt;</span><span style="font-weight: bold; color: #7f0055;">option</span> value=<span style="color: #2a00ff;">“</span><span style="color: #2a00ff;">1</span><span style="color: #2a00ff;">“</span><span style="color: #7f0055;">&gt;</span>one<span style="color: #7f0055;">&lt;/</span><span style="font-weight: bold; color: #7f0055;">option</span><span style="color: #7f0055;">&gt;</span>
  <span style="color: #7f0055;">&lt;</span><span style="font-weight: bold; color: #7f0055;">option</span> value=<span style="color: #2a00ff;">“</span><span style="color: #2a00ff;">2</span><span style="color: #2a00ff;">“</span><span style="color: #7f0055;">&gt;</span>two<span style="color: #7f0055;">&lt;/</span><span style="font-weight: bold; color: #7f0055;">option</span><span style="color: #7f0055;">&gt;</span>
  <span style="color: #7f0055;">&lt;</span><span style="font-weight: bold; color: #7f0055;">option</span> value=<span style="color: #2a00ff;">“</span><span style="color: #2a00ff;">3</span><span style="color: #2a00ff;">“</span><span style="color: #7f0055;">&gt;</span>three<span style="color: #7f0055;">&lt;/</span><span style="font-weight: bold; color: #7f0055;">option</span><span style="color: #7f0055;">&gt;</span>
<span style="color: #7f0055;">&lt;/</span><span style="font-weight: bold; color: #7f0055;">select</span><span style="color: #7f0055;">&gt;</span>

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

<span style="font-weight: bold; color: #7f0055;">var</span> value = document.getElementById(<span style="color: #2a00ff;">’sel’</span>).value

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

<span style="font-weight: bold; color: #7f0055;">var</span> sel = document.getElementById(<span style="color: #2a00ff;">’sel’</span>);
<span style="font-weight: bold; color: #7f0055;">var</span> text = sel.options[sel.selectedIndex].text;

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

<span style="font-weight: bold; color: #7f0055;">var</span> sel = document.getElementById(<span style="color: #2a00ff;">’sel’</span>);
<span style="color: #3f7f59;">// создаем элемент option</span>
<span style="font-weight: bold; color: #7f0055;">var</span> opt = document.createElement(<span style="color: #2a00ff;">‘option’</span>);
<span style="color: #3f7f59;">// определяем значение и текст нового элемента</span>
opt.value = 4;
opt.innerHTML = <span style="color: #2a00ff;">‘four’</span>;
<span style="color: #3f7f59;">// добавляем option в конец select</span>
sel.appendChild(opt);

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

<span style="font-weight: bold; color: #7f0055;">var</span> sel = document.getElementById(<span style="color: #2a00ff;">’sel’</span>);
<span style="font-weight: bold; color: #7f0055;">var</span> opt = document.createElement(<span style="color: #2a00ff;">‘option’</span>);
opt.value = -1;
opt.innerHTML = <span style="color: #2a00ff;">‘minus’</span>;
sel.insertBefore(opt, sel.options[0]);

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

<span style="font-weight: bold; color: #7f0055;">var</span> sel = document.getElementById(<span style="color: #2a00ff;">’sel’</span>);
<span style="font-weight: bold; color: #7f0055;">var</span> opt = document.createElement(<span style="color: #2a00ff;">‘option’</span>);
opt.value = 7;
opt.innerHTML = <span style="color: #2a00ff;">‘inserted’</span>;
sel.insertBefore(opt, sel.options[2]);

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

<span style="font-weight: bold; color: #7f0055;">var</span> sel = document.getElementById(<span style="color: #2a00ff;">’sel’</span>);
sel.removeChild(sel.options[sel.selectedIndex]);

7. Очистить select

<span style="font-weight: bold; color: #7f0055;">var</span> sel = document.getElementById(<span style="color: #2a00ff;">’sel’</span>);
<span style="font-weight: bold; color: #7f0055;">var</span> nodes = sel.childNodes;
<span style="font-weight: bold; color: #7f0055;">var</span> len = nodes.length;
<span style="font-weight: bold; color: #7f0055;">for</span> (<span style="font-weight: bold; color: #7f0055;">var</span> i=len-1; i&gt;=0; i–)
{
    sel.removeChild(nodes[i]);
}

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

<span style="font-weight: bold; color: #7f0055;">var</span> sel = document.getElementById(<span style="color: #2a00ff;">’sel’</span>);
<span style="color: #3f7f59;">// вариант №1: через установку атрибута для option</span>
sel.options[sel.length - 1].setAttribute(<span style="color: #2a00ff;">’selected’</span>, <span style="color: #2a00ff;">’selected’</span>);
<span style="color: #3f7f59;">// вариант №2: используя свойство selectedIndex для select</span>
sel.selectedIndex = sel.length - 1;

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

<span style="font-weight: bold; color: #7f0055;">var</span> sel = document.getElementById(<span style="color: #2a00ff;">’sel’</span>);
sel.options[0].setAttribute(<span style="color: #2a00ff;">‘disabled’</span>, <span style="color: #2a00ff;">‘disabled’</span>);

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

<span style="font-weight: bold; color: #7f0055;">var</span> sel = document.getElementById(<span style="color: #2a00ff;">’sel’</span>);
<span style="font-weight: bold; color: #7f0055;">for</span>(<span style="font-weight: bold; color: #7f0055;">var</span> i=0; i&lt;sel.length; i++)
{
    <span style="font-weight: bold; color: #7f0055;">if</span> (i != sel.selectedIndex) {
        sel.options[i].style.color = <span style="color: #2a00ff;">‘red’</span>;
    }
}

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

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

Запись навигация

Top