jQuery get value of select onChange

Question

I was under the impression that I could get the value of a select input by doing this   this  val    and applying the onchange parameter to the select field   It would appear it only works if I reference the ID    How do I do it using this

User · Answer

select id   on  change   function         alert this value     or alert   this  val             lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt    lt select id  select id  gt       lt option value  1  gt Option 1 lt  option gt       lt option value  2  gt Option 2 lt  option gt       lt option value  3  gt Option 3 lt  option gt       lt option value  4  gt Option 4 lt  option gt   lt  select gt

User · Answer

Look for jQuery site   HTML    lt form gt     lt input class  target  type  text  value  Field 1  gt     lt select class  target  gt       lt option value  option1  selected  selected  gt Option 1 lt  option gt       lt option value  option2  gt Option 2 lt  option gt     lt  select gt   lt  form gt   lt div id  other  gt    Trigger the handler  lt  div gt    JAVASCRIPT        target    change function       alert   Handler for  change   called            jQuery s example   To add a validity test to all text input elements       input type  text      change function          Check input     this   val     for validity here

User · Answer

Note that if these are not working  it might be because the DOM has not loaded and your element was not found yet   To fix  put the script at the end of body or use document ready    ready function            select   on  change   function ret               console log ret target value

User · Answer

only with JS  let select document querySelectorAll  select      select forEach function el        el onchange    function         alert this value

User · Answer

You can try this  using jQuery -   x000D   x000D     select   on  change   function   x000D    x000D      alert  this value    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt select gt  x000D       lt option value  1  gt Option 1 lt  option gt  x000D       lt option value  2  gt Option 2 lt  option gt  x000D       lt option value  3  gt Option 3 lt  option gt  x000D       lt option value  4  gt Option 4 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    Or you can use simple Javascript like this-   x000D   x000D  function getNewVal item  x000D    x000D      alert item value   x000D    x000D   lt select onchange  getNewVal this    gt  x000D       lt option value  1  gt Option 1 lt  option gt  x000D       lt option value  2  gt Option 2 lt  option gt  x000D       lt option value  3  gt Option 3 lt  option gt  x000D       lt option value  4  gt Option 4 lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

Try the event delegation method  this works in almost all cases     document body  on  change    selectID  function  e         doStuff    var optVal      selectID option selected   val

User · Answer

Let me share an example which I developed with BS4  thymeleaf and Spring boot   I am using two SELECTs  where the second   subtopic   gets filled by an AJAX call based on the selection of the first  topic     First  the thymeleaf snippet     lt div class  form-group  gt        lt label th for  topicId  th text    label topic   gt Topic lt  label gt        lt select class  custom-select               th id  topicId  th name  topicId               th field    topicId                th errorclass  is-invalid  required gt            lt option value    selected                  th text    option select   gt Select           lt  option gt            lt optgroup th each  topicGroup     topicGroups                      th label    topicGroup   gt                lt option th each  topicItem     topics                        th if    topicGroup    topicItem grp                         th value     topicItem baseIdentity id                         th text    topicItem name                        th selected     topicItem baseIdentity id  topicId    gt                lt  option gt            lt  optgroup gt            lt option th each  topicIter     topics                    th if    topicIter grp                           th value     topicIter baseIdentity id                     th text    topicIter name                    th selected     topicIter baseIdentity  id  topicId    gt            lt  option gt        lt  select gt        lt small id  topicHelp  class  form-text text-muted              th text    label topic tt   gt select lt  small gt   lt  div gt  lt  --  form-group -- gt    lt div class  form-group  gt       lt label for  subtopicsId  th text    label subtopicsId   gt subtopics lt  label gt       lt select class  custom-select              id  subtopicsId  name  subtopicsId              th field    subtopicsId               th errorclass  is-invalid  multiple  multiple  gt           lt option value    disabled                 th text    option multiple optional   gt Select          lt  option gt           lt option th each  subtopicsIter     subtopicsList                   th value     subtopicsIter baseIdentity id                    th text    subtopicsIter name   gt           lt  option gt       lt  select gt       lt small id  subtopicsHelp  class  form-text text-muted             th unless     fields hasErrors  subtopicsId                th text    label subtopics tt   gt select lt  small gt       lt small id  subtopicsIdError  class  invalid-feedback             th if     fields hasErrors  subtopicsId                th errors    subtopicsId   gt Errors lt  small gt   lt  div gt  lt  --  form-group -- gt    I am iterating over a list of topics that is stored in the model context  showing all groups with their topics  and after that all topics that do not have a group  BaseIdentity is an  Embedded composite key BTW   Now  here s the jQuery that handles changes       topicId   change function          selectedOption     this  val        if  selectedOption                       subtopicsId   prop  disabled    disabled   val                  subtopicsId option   slice 1  remove       keep first       else               subtopicsId   prop  disabled   false          var orig     location  attr  origin            var url   orig     getsubtopics     selectedOption            ajax               url  url             success  function  response                      var len   response length                          subtopicsId option value        remove       keep first                      for  var i   0  i  lt  len  i                              var id   response i   baseIdentity    id                            var name   response i   name                                subtopicsId   append   lt option value      id      gt     name     lt  option gt                                                              error  function  e                        console log  ERROR      e                                          change       and call it once defined   The initial call of change   makes sure it will be executed on page re-load or if a value has been preselected by some initialization in the backend   BTW  I am using  manual  form validation  see  is-valid   is-invalid    because I  and users  didn t like that BS4 marks non-required empty fields as green  But that s byond scope of this Q and if you are interested then I can post it also

User · Answer

I want to add  who needs full custom header functionality     function addSearchControls json                tblCalls thead   append     tblCalls thead tr first   clone                 tblCalls thead tr eq 1  th   each function  index                   For text inputs             if  index    1  amp  amp  index    2                      this  replaceWith   lt th gt  lt input type  text  placeholder         this  html       ara  gt  lt  input gt  lt  th gt                     var searchControl       tblCalls thead tr eq 1  th eq     index      input                    searchControl on  keyup   function                          table column index  search searchControl val    draw                                                    For DatePicker inputs             else if  index    1                      this  replaceWith   lt th gt  lt input type  text  id  datepicker  placeholder        this  html       ara  class  tblCalls-search-date datepicker    gt  lt  th gt                          tblCalls-search-date   on  keyup click change   function                          var i     this  attr  id        getting column index                     var v     this  val        getting search input value                     table columns index  search v  draw                                             datepicker   datepicker                       dateFormat   dd-mm-yy                       altFieldTimeOnly  false                      altFormat   yy-mm-dd                       altTimeFormat   h m                       altField    tarih-db                       monthNames    Ocak    Subat    Mart    Nisan    Mayis    Haziran    Temmuz    Agustos    Eyl  l    Ekim    Kasim    Aralik                        dayNamesMin    Pa    Pt    Sl      a    Pe    Cu    Ct                        firstDay  1                      dateFormat   yy-mm-dd                       showOn   button                       showAnim   slideDown                       showButtonPanel  true                      autoSize  true                      buttonImage   http   jqueryui com resources demos datepicker images calendar gif                       buttonImageOnly  false                      buttonText   Tarih Se  iniz                       closeText   Temizle                                        document  on  click     ui-datepicker-close   function                              datepicker   val                          table columns 5  search     draw                                                     For DropDown inputs             else if  index    2                      this  replaceWith   lt th gt  lt select id  filter comparator  class  styled-select yellow rounded  gt  lt option value  select  gt Se   lt  option gt  lt option value  eq  gt   lt  option gt  lt option value  gt  gt  amp gt   lt  option gt  lt option value  lt  gt  amp lt   lt  option gt  lt option value  ne  gt    lt  option gt  lt  select gt  lt input type  text  id  filter value  gt  lt  th gt                      var selectedOperator                      filter comparator   on  change   function                          var i     this  attr  id        getting column index                     var v     this  val        getting search input value                     selectedOperator   v                      if v   select                           table columns index  search  select 0   draw                            filter value   val                                               filter value   on  keyup click change   function                          var keycode    event keyCode   event keyCode   event which                       if  keycode     13                             var i     this  attr  id        getting column index                         var v     this  val        getting search input value                         table columns index  search selectedOperator         v  draw

User · Answer

jQuery get value of select html elements using on Change event  For Demo  amp  More Example   x000D   x000D    document  ready function         x000D         body   on  change    select box   function     x000D               show only   val this value   x000D          x000D       x000D   lt  DOCTYPE html gt    x000D   lt html gt    x000D   lt title gt jQuery Select OnChnage 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 box  gt  x000D    lt option value    gt Select One lt  option gt  x000D       lt option value  One  gt One lt  option gt  x000D       lt option value  Two  gt Two lt  option gt  x000D       lt option value  Three  gt Three lt  option gt  x000D       lt option value  Four  gt Four lt  option gt  x000D       lt option value  Five  gt Five lt  option gt  x000D   lt  select gt  x000D   lt br gt  lt br gt    x000D   lt input type  text  id  show only  disabled    gt  x000D   lt  body gt    x000D   lt  html gt    x000D   x000D   x000D

User · Answer

This is helped for me   For select      select tags   on  change   function         alert    this  find   selected   val            For radio checkbox      radio tags   on  change   function         alert    this  find   checked   val

User · Answer

This is what worked for me  Tried everything else with no luck    lt html gt      lt head gt       lt title gt Example  Change event on a select lt  title gt        lt script type  text javascript  gt         function changeEventHandler event            alert  You like     event target value     ice cream                   lt  script gt      lt  head gt      lt body gt       lt label gt Choose an ice cream flavor   lt  label gt       lt select size  1  onchange  changeEventHandler event    gt         lt option gt chocolate lt  option gt         lt option gt strawberry lt  option gt         lt option gt vanilla lt  option gt       lt  select gt     lt  body gt    lt  html gt    Taken from Mozilla

User · Answer

Arrow function has a different scope than function  this value will give undefined for an arrow function  To fix use      select   on  change   event    gt         alert  event target value

User · Answer

I was under the impression that I could get the value of a select   input by doing this   this  val      This works if you subscribe unobtrusively  which is the recommended approach        id of field   change function              this  val   will work here       if you use onselect and mix markup with script you need to pass a reference to the current element   onselect  foo this      and then   function foo element             element  val   will give you what you are looking for

User · Answer

For all selects  invoke this function      select   on  change   function         alert  this value          For only one select       select id

User · Answer

jQuery document  ready function         jQuery   id   change function           var value   jQuery this  children   selected   attr  value         alert value

User · Answer

Try this-   x000D   x000D     select   on  change   function     x000D    alert  this value    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt select gt  x000D       lt option value  1  gt One lt  option gt  x000D       lt option value  2  gt Two lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    You can also reference with onchange event-   x000D   x000D  function getval sel  x000D    x000D      alert sel value   x000D    x000D   lt select onchange  getval this    gt  x000D       lt option value  1  gt One lt  option gt  x000D       lt option value  2  gt Two lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

[jquery] jQuery get value of select onChange

Examples related to jquery

Examples related to select