On select change get data attribute value

Question

The following code returns  undefined         select   change function        alert   this  data  id           lt select gt       lt option data-id  1  gt one lt  option gt       lt option data-id  2  gt two lt  option gt       lt option data-id  3  gt three lt  option gt   lt  select gt

User · Answer

this works for me   lt select class  form-control  id  foo  gt       lt option value  first  data-id  1  gt first lt  option gt       lt option value  second  data-id  2  gt second lt  option gt   lt  select gt    and the script      foo   on  change  function        var dataid       foo option selected   attr  data-id        alert dataid

User · Answer

document querySelector  select   onchange   function          alert this selectedOptions 0  getAttribute  data-attr

User · Answer

Vanilla Javascript   this querySelector   checked   getAttribute  data-id

User · Answer

Try the following      select   change function      alert   this  children  option selected   data  id           Your change subscriber subscribes to the change event of the select  so the this parameter is the select element  You need to find the selected child to get the data-id from

User · Answer

By using this you can get the text  value and data attribute   lt select name  quot your name quot  id  quot your id quot  onchange  quot getSelectedDataAttribute this  quot  gt       lt option value  quot 1 quot  data-id  quot 123 quot  gt One lt  option gt       lt option value  quot 2 quot  data-id  quot 234 quot  gt Two lt  option gt   lt  select gt   function getSelectedDataAttribute event        var selected text   event options event selectedIndex  innerHTML      var selected value   event value      var data-id   event options event selectedIndex  dataset id

User · Answer

You need to find the selected option     this  find   selected   data  id     or    this  find   selected   attr  data-id     although the first method is preferred

User · Answer

foo option selected   data  id

User · Answer

You can use context syntax with this or   this    This is the same effect as find      x000D   x000D     select   change function     x000D      console log  Clicked option value   gt        this  val     x000D       lt  -- undefined console log    this  without explicit  select   gt        this  data  id     -- gt  x000D       lt  -- error console log  this without explicit  select   gt      this data  id     -- gt  x000D      console log   select  amp    this    gt             selected     this   data  id     x000D      console log   select  amp  this   gt                selected   this  data  id     x000D      console log  option select  amp  this   gt         option selected   this  data  id     x000D      console log    this   amp  find   gt              this  find   selected   data  id     x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt select gt  x000D       lt option data-id  1  gt one lt  option gt  x000D       lt option data-id  2  gt two lt  option gt  x000D       lt option data-id  3  gt three lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    As a matter of microoptimization  you might opt for find     If you are more of a code golfer  the context syntax is more brief   It comes down to coding style basically   Here is a relevant performance comparison

[jquery] On select change, get data attribute value

Examples related to jquery