jQuery select change event get selected option

Question

I bound an event on the change event of my select elements with this     select   on  change       function  e          How can I access the element which got selected when the change event occurs

User · Answer

See official API documentation https   api jquery com selected-selector   This good works       select    on  change  function       var str            For multiple choice       select option selected    each function         str       this   val                       and      select    on  change  function          For unique choice   var selVal       select option selected    val           and be easy for unique choice  var SelVal        idSelect option selected    val

User · Answer

You can use this jquery select change event for get selected option value  For Demo   x000D   x000D    document  ready function         x000D         body   on  change    select   function     x000D               show selected   val this value   x000D          x000D       x000D   lt  DOCTYPE html gt    x000D   lt html gt    x000D   lt title gt Learn Jquery value Method lt  title gt  x000D   lt head gt   x000D   lt script src  https   code jquery com jquery-3 3 1 min js  gt  lt  script gt   x000D   lt  head gt    x000D   lt body gt    x000D   lt select id  select  gt  x000D    lt option value    gt Select One lt  option gt  x000D       lt option value  PHP  gt PHP lt  option gt  x000D       lt option value  jAVA  gt JAVA lt  option gt  x000D       lt option value  Jquery  gt jQuery lt  option gt  x000D       lt option value  Python  gt Python lt  option gt  x000D       lt option value  Mysql  gt Mysql lt  option gt  x000D   lt  select gt  x000D   lt br gt  lt br gt    x000D   lt input type  text  id  show selected  gt  x000D   lt  body gt    x000D   lt  html gt    x000D   x000D   x000D

User · Answer

Another and short way to get value of selected value        selectElement   on  change  function       var selectedVal     this  val                                      - gt  presents  selectElement selected value                                                      v                presents  selectElement

User · Answer

Delegated Alternative In case anyone is using the delegated approach for their listener  use e target  it will refer to the select element       myform   on  change    select   function  e        var val     e target  val        var text     e target  find  quot option selected quot   text      only time the find is required     var name     e target  attr  name       JSFiddle Demo

User · Answer

I find this shorter and cleaner  Besides  you can iterate through selected items if there are more than one      select   on  change   function           var selectedValue   this selectedOptions 0  value       var selectedText    this selectedOptions 0  text

User · Answer

You can use the jQuery find method      select   change function           var optionSelected     this  find  option selected         var valueSelected    optionSelected val         var textSelected     optionSelected text           The above solution works perfectly but I choose to add the following code for them willing to get the clicked option  It allows you get the selected option even when this select value has not changed   Tested with Mozilla only          select   find  option   click function           var optionSelected     this        var valueSelected    optionSelected val         var textSelected     optionSelected text

User · Answer

select   on  change   function  e        var optionSelected      option selected   this       var valueSelected   this value

User · Answer

lt select id  selectId  gt       lt option value  A  gt A lt  option gt       lt option value  B  gt B lt  option gt       lt option value  C  gt C lt  option gt   lt  select gt        selectId   on  change   function           var selectVal       selectId option selected   val          First create a select option  After that using jquery you can get current selected value when user change select option value

User · Answer

SelectID   change function              var SelectedText      option selected  this  text            var SelectedValue      option selected  this  val

[jquery] jQuery select change event get selected option

Examples related to jquery

Examples related to events