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>:

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

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

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

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

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

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

7. Очистить select

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

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

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


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

  • То что доктор прописал! Таких бы статей побольше! А то мне все влом посидеть над javascript )))

  • Отличная статья! Оказывается jQuery не такой уж и гениальный 🙂

  • sel.options[0].setAttribute(‘disabled’, ‘disabled’);
    А есть пример кода который бы позволил реализовать этот пример прямым присваиванеим.

  • jQuery – упрощает жизнь также как и mootools
    но когда нужно немного javascript
    лучше писать на чистом javascript