Html select option onchange

Обработка события onchange

По сути название события onchange происходит при изменении каких-либо данных в полях формы. Следует учитывать, что событие onchange наступает далеко не для всех элементов формы, поэтому и обработка его выполняется для:

Обработка события onchahge для текстовых полей

Текстовые поля изменяются при вводе текста в них, но в отличие от события oninput , эти изменения для события onchange становятся заметны только после потери фокуса текстовым полем. В примере ниже вы можете набрать любой текст в поле, а затем нажать на кнопку с текстом «Проверить» или кликнуть в любом месте примера или страницы. После этого набранный вами текст отобразится ниже поля ввода. Также можно нажать клавишу Enter или Tab .

Код примера приведен ниже:

Аналогичным способом мы можем обработать событие onchange для большого текстового поля (элемент ). В примере ниже мы получим текст из этого поля с id=»myArea» при нажатии на клавишу Tab , т.е. тоже при потере фокуса текстовым полем.

Обработка события onchahge для выпадающего списка

Задача у нас будет такая: нужно поменять картинку в теге img c , выбрав ее из выпадающего списка по названию. Поскольку элемент является «подчиненным», т.е. дочерним элементом тега , то в html-разметке мы создадим соответствующие теги и зададим каждому из них атрибут name:

Элемент select в свою очередь является родительским контейнером для нескольких элементов , которые и формируют пункты списка. В каждом из них есть атрибут value , в который мы запишем путь к картинкам из папки images. Именно этот атрибут и будет «главным действующим лицом» в нашем скрипте.

Событие onchange наступает для списка, когда пользователь выбирает другой пункт. В этот момент мы можем назначить в src картинки, обратившись к ней по id (picHolder) значение атрибута value списка, подхватываемого им из выбранного элемента option . Обращение к самому списку происходит в виде name_формы.name_списка . Получаем такой несложный скрипт:

Обработка события onchahge для полей с типом number

Поле с типом number изменяется при вводе значения вручную или при клике по стрелочкам этого поля. Если вы вводите цифры вручную, то нужно нажать клавишу Enter или увести фокус на другой элемент. Можно, например, нажать клавишу Tab .

В качестве примера будем изменять ширину div-а с помощью поля для ввода чисел. В этом поле мы можем указать минимальное ( min ), максимальное ( max ), текущее значение ( value ) и шаг приращения/уменьшения числа ( step ). При обработке события onchange нам понадобится изменения атрибута и js-свойства value :

Обработка события onchahge для полей с типом range

Для ползунков (элементы типа ) событие onchange наступает при перемещении ползунка. У этого элемента такие же атрибуты, как и у поля для ввода чисел ( ). При обработке события onchange нам понадобится значение ползунка, которое мы получаем с помощью его атрибута и js-свойства value . Для того, чтобы видеть числовое значение value ползунка, мы выведем его в span с внутри элемента label для ползунка.

Обратите внимание, что событие onchange наступает для ползунка и при прокрутке колесика мыши, но первоначально этот элемент должен получить фокус.

Обработка события onchange для поля с типом checkbox

Для флажков ( ) тоже можно обработать событие onchange . В примере ниже от Jon Kantner показано, как можно изменить внешний вид флажка, просто задав ему другой класс по событию onchange и использовав анимацию типа @keyframes .

Вам может понравиться

Использование коллекции Set в JavaScript

Использование throw и конструкции try . catch . finally в Javascript

Диалоговые окна prompt() и confirm()

10 комментариев

Здравствуйте Админ. У меня при обновлении выбранный пункт запоминается, тут проблем нет. Меня интересовал вопрос: возможно при выборе определенного пункта (например пункт 3) запомнить значение value (равное 19 как в вашем примере) в какую-то переменную, чтоб ее можно было вывести на странице или использовать в дальнейших расчетах..

писал вопрос, был на модерации, сейчас вообще его никак не видно. система комментариев работает или глюк?

Добрый день.
Ваш комментарий действительно был на модерации.
Однако отвечать на него мгновенно нет возможности.

select name=»cat»
option value=»» Все категории option
option value=»10″ Пункт один option
option value=»11″ selected=selected Пункт два option
option value=»15″ Пункт три option
option value=»19″ Пункт четыре option
select
код не передался, надеюсь сейчас получится.

if ( selectedCat ) cat . querySelector ( ‘option[value crayon-o»>+ selectedCat + ‘»]’ ) . selected = true ;

Посмотреть работающий пример можно по ссылке на codepen.io.
Запоминание выбранного меню реализуется за счет использования localStorage.
Однако, если я не ошибаюсь, вы используете этот код для выбора категорий WordPress. Если речь идет о создании настроек в Customizer, то обычно выбранный пункт система WP Customizer запоминает сама. Если же это выбор категорий в виджетах, советую посмотреть код одного из таких виджетов, например, тех же категорий, чтобы понять, как реализуется запоминание выбранного пункта средствами функций WordPress. Посмотрите информацию еще по этой ссылке.

Здравствуйте Админ.
Я не сильно разбираюсь в программировании, поэтому прошу посильной помощи. Возникла такая необходимость:
Есть выпадающий список, работает как мне надо, т.е. при обновлении страницы помнит выбранный option
Как можно вытащить значение value выбранного пункта и запомнить в переменной, чтобы ее можно было вставить в php запрос? Эта переменная — числовое значение — пока выбран соответствующий пункт не должна сбрасываться при обновлении страницы.
Заранее спасибо. Все категории
Пункт один
Пункт два
Пункт три
Пункт четыре

Добрый день,подскажите пожалуйста,как реализовать такой пример :
У нас есть выпадающий список select и внутри него варианты с числами для Step, как сделать так чтобы при выборе цифры step менялся.
Спасибо за любую помощь)

Уважаемый Никто!
Интересный у вас ник. По поводу вашего вопроса: поскольку непонятно, что представляет собой Step, и как именно он должен меняться, то будем исходить из того, что Step — это , для которого нужно в тексте поменять цифру рядом с текстом Step + цвет этого текста.
Поэтому в мы сделаем ряд элементов , в которых в атрибуте value будет значение цвета, а в самом тексте — цифра.
Код, который будет приводить к изменениям в div-е при выборе разных цифр.

Источник

Событие onchange / событие change

Событие onchange JavaScript происходит, когда изменяется первоначальное состояние или содержимое элемента. В некоторых случаях событие возникает, когда элемент выходит из фокуса ввода.

Как зарегистрировать

В HTML

 (IE, Google Chrome, Firefox, Opera, Safari)

В JavaScript

object.onchange = handler; (IE, Google Chrome, Firefox, Opera, Safari). object.addEventListener ("change", handler, useCapture); (IE - с версии 9, Google Chrome, Firefox, Opera, Safari). object.attachEvent ("onchange", handler); (IE, Opera)

Объект event доступен для всех обработчиков событий во всех браузерах. Его свойства содержат дополнительную информацию о текущем событии.

Событие работает по-разному для разных элементов:

• JavaScript select onchange — событие onchange происходит, когда изменяется выделение;
• input:checkbox и input:radio — в Firefox , Opera , Google Chrome и Safari : событие onchange происходит, когда изменяется состояние выбора. В Internet Explorer – когда элемент выходит из фокуса ввода и когда изменяется его состояние.

Для реализации кроссбраузерности, чтобы определить, когда изменилось состояние элемента, используйте событие onclick :

• textarea, input:password, input:search и input:text — событие onchange происходит, когда элемент выходит из фокуса ввода и когда его содержимое изменилось. Чтобы определить, когда изменилось содержимое, используйте в Internet Explorer событие onpropertychange , а в Firefox , Opera , Google Chrome и Safari ( в Internet Explorer , начиная с версии 9 ) — событие oninput . В Google Chrome , Safari и Internet Explorer , начиная с версии 9 , также может использоваться событие textInput ;
• input:file — событие onchange JavaScript происходит, когда изменилось содержимое. Если пользователь в Internet Explorer вводит путь ( не используя кнопку «Обзор» ), то событие onchange происходит, когда элемент выходит из фокуса ввода. Поэтому в Internet Explorer используйте событие onpropertychange ;
• input:range — событие onchange происходит, когда изменилось значение элемента.

Пример HTML-кода 1

Этот пример иллюстрирует использование события onchange для элемента select :

  function OnSelectionChange (select) Select an item from the following list: 
 Apple Pear Peach 

Пример HTML-кода 2

В этом примере используется событие onchange JavaScript и объект Date , чтобы вычислить время, прошедшее между двумя заданными значениями:

    h: m: - h: m: 
 
Elapsed time in mins: 

onchange JavaScript поддерживается объектами :

input:checkbox, input:file, input:password, input:radio, input:range, input:search, input:text, keygen, select, textarea.

Вадим Дворников автор-переводчик статьи « onchange event / change event »

Пожалуйста, оставляйте свои комментарии по текущей теме материала. За комментарии, подписки, отклики, лайки, дизлайки низкий вам поклон!

Источник

How to Select Onchange in JavaScript

JavaScript offers a variety of built-in features to minimize the time and effort of developers. JavaScript interacts with the HTML elements to make an interactive look for websites. It is possible through an onchange event that is triggered when the user changes the selected option via element. This post explains the selection of onchange events along with a practical example in JavaScript. The content that demonstrates this post is as follows.

Читайте также:  Get selected option value

How to Select Onchange in JavaScript?

The onchange event occurs when the element value is modified. It is specifically used in checkboxes for form validation. For instance, a drop-down list is utilized, having different options. The onchange event is called whenever the user selects any option. All modern browsers are compatible with this event.

An example is provided to select a value using the onchange event. It is divided into HTML and JavaScript files. This example code is provided below:

The description of the code is listed here:

• First, a dropdown list is created by assigning the id “education” within tags
• In this list, different options are provided as “School”, “College” and “University” on behalf of the onchange event.
• The onchange event is called if one of the previously mentioned options is selected.
• Lastly, the tag is used to attach the JavaScript file “js”.

The “test.js” file contains the following code:

JavaScript Code

function GetSelectedTextValue ( education ) {
var sleTex = education. options [ education. selectedIndex ] . innerHTML ;
var selVal = education. value ;
alert ( «Selected Text: » + sleTex + » Value: » + selVal ) ;
}

The description of the code is given below:

• The GetSelectedTextValue() method is used by passing the “education” as an argument.
• A “sleTex” variable is employed to extract the value of education from the HTML
• After that, “selVal” variable is used to retrieve the value of education.
• In the end, an alert box is generated that extracts the text as well as value by “sleTex” and “selVal”.

The output shows the dropdown list of “School”, “College” and “University” options. The onchange event is called if the specific option is selected. Finally, it displays the value of the selected text in the pop-up window.

Conclusion

JavaScript has a built-in event onchange that occurs when the value of an element is selected by the user. For this purpose, a dropdown list is generated to select a value on behalf of the onchange event.

It is useful to provide a cross-check facility when selecting an option. In this post, you have experienced how to select text as well as value by utilizing onchange events.

About the author

Syed Minhal Abbas

I hold a master’s degree in computer science and work as an academic researcher. I am eager to read about new technologies and share them with the rest of the world.

Источник