jQuery событие OnChange vs атрибут HTML OnChange


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

Для наглядной демонстрации приведем два элемента <select>: select1 с фруктами и select2 с месяцами.

Рассмотрим список элементов select1:

<select id="select1" multiple="multiple">
<option>Апельсин</option>
<option>Мандарин</option>
<option selected="selected">Яблоко</option>
<option>Груша</option>
<option selected="selected">Вишня</option>
</select>

На select1 навешиваем обработчик событий OnChange с помощью jQuery:

 $(function () {
$("#select1").change(function () {
chek_option(this,'#rez1');
}).change();
});

Который при изменении select1 будет вызывать внешнюю функцию chek_option и передавать ей два параметра: this - ссылка на наш объект, в данном случае это select1, и второй параметр это id контейнера в который выводить результат.

А вот и наша функция:

function chek_option(item,name) {
var str = "";
$(item.children).each(function () {
if(this.selected) str += $(this).val() + " ";
});
$(name).html('Выбран элемент: ' + str);
}

Суть ее работы очень проста, получаем объект, находим всех его потомков (в данном случае это элементы option) и проверяем, если элемент выбран, то заносим его в переменную. После чего выводим переменную в контейнер, id которого мы передали.

Ну а на select2 навешиваем обработчик событий OnChange с помощью атрибута HTML:

<select id="select2" onchange="chek_option(this,'#rez2')" multiple="multiple">
<option>Март</option>
<option>Апрель</option>
<option selected="selected">Май</option>
<option>Август</option>
<option selected="selected">Январь</option>
</select>

Который также при изменении select2 будет вызывать туже функцию chek_option и передавать ей те же два параметра.

По сути, эти два обработчика работают одинаково, основное отличие лишь в том, что после загрузки страницы, благодаря функции jQuery change() один раз запускается событие на select1, по этому сразу и видно результат выбора элементов.

Если убрать функцию .change() строка 4, то работа двух представленных обработчиков OnChange будет одинаковой.

Иногда это полезно. А иногда нет смысла подгружать целую библиотеку jQuery. Решать Вам!

OnChange
Пример события OnChange HTML и jQuery

,

1 Star2 Stars3 Stars4 Stars5 Stars (голосов 6, в среднем: 5.00 из 5)
Loading ... Loading ...


  1. #1 zeloras - Апрель 17th, 2011 at 12:15

    Спасибо! :)

  2. #2 Георгий - Июнь 1st, 2011 at 10:34

    Спасибо. Помогло

  3. #3 Тема - Июнь 9th, 2011 at 17:09

    Да с jQuery удобней)

  4. #4 psyhonut - Сентябрь 6th, 2011 at 16:11

    Зачем в цикле проверять? $(‘select :selected’).val();

  5. #5 nice - Сентябрь 6th, 2011 at 19:15

    А если несколько элементов выбрано?

  6. #6 Дизайн студия ProGrafika - Сентябрь 12th, 2011 at 08:41

    Спасибо очень помогло. Все доступно и пример очень кстати.

  7. #7 gs-design - Январь 23rd, 2012 at 04:59

    При jQuery мы фактически с помощью .change() вызвали программно событие onChange.

    То же самое можно сделать и для HTML варианта на программном уровне через $(‘#select2′).change();
    Или если без jQuery то так:

    var sel = document.getElementById(‘select2′);
    var ttt = document.createEvent(‘HTMLEvents’); // Создаём объект события, выбран модуль
    ttt.initEvent(‘change’,true, false); // Инициализируем объект события
    sel.dispatchEvent(ttt);

    Разница в примере только в том, что в первом случае автор программно генерировал событие onChange так что разницы НЕТ никакой – не стоит вводить в заблуждение новичков

(will not be published)

Spam Protection by WP-SpamFree Plugin

  1. No trackbacks.