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

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

В последние пару лет jQuery стал очень популярным. Этот javascript framework легко изучается,
производительность и большой спектр его возможностей очень радуют.
Селекторы jQuery позволяют производить выборку элементов по разным критериям. Селекторы являются одной из главных частей фреймворка, поэтому необходимо уметь грамотно ими пользоваться. Учиться лучше всего на примерах. Поэтому я хочу поделиться с Вами информацией о методах работы с конткретными HTML элементами при помощи jQuery.

Первая заметка - о работе с HTML элементом <select>

Работа с выпадающим списком в jQuery

Основными дейсвиями, которые производятся над выпадающим списком является получение выбранного значения, добавление/удаление элементов из списка, изменение их атрибутов.

Рассмотрим эти действия по порядку. Например, у нас есть select с id=”sel”:

<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. Получение значения выбранного элемента

   $(‘#sel option:selected’).val()
   

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

   $(‘#sel option:selected’).html();
   

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

   $(‘#sel’).append( $(‘<option value=”4″>four</option>’) );
   

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

   $(‘#sel’).prepend( $(‘<option value=”-1″>minus</option>’) );
   

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

   $(‘#sel option:nth-child(2)’).after($(‘<option value=”7″>inserted</option>’));
   

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

   $(‘#sel option:selected’).remove();
   

7. Очистить select

   $(‘#sel’).empty();
   

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

   $(‘#sel option:last’).attr(’selected’, ’selected’);
   

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

   $(‘#sel option:nth-child(3)’).attr(‘disabled’, ‘disabled’);
   

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

    $(‘#sel :not(option:selected)’).css(‘color’, ‘red’);
    

Как видите, ничего сложного здесь нет. В седующих постах будет рассмотрена информация
о работе с другими HTML элементами на jQuery.