jQuery - getting custom attribute from selected option

Question

Given the following    lt select id  location  gt       lt option value  a  myTag  123  gt My option lt  option gt       lt option value  b  myTag  456  gt My other option lt  option gt   lt  select gt    lt input type  hidden  id  setMyTag    gt    lt script gt        function                 location   change function                var element     this               var myTag   element attr  myTag                     setMyTag   val myTag                        lt  script gt    That does not work    What do I need to do to get the value of the hidden field updated to the value of myTag when the select is changed   I m assuming I need to do something about getting the currently selected value

User · Answer

You can also try this one as well with data-myTag   lt select id  location  gt       lt option value  a  data-myTag  123  gt My option lt  option gt       lt option value  b  data-myTag  456  gt My other option lt  option gt   lt  select gt    lt input type  hidden  id  setMyTag    gt    lt script gt        function                 location   change function               var myTag      option selected   this  data  myTag                    setMyTag   val myTag                        lt  script gt

User · Answer

Try This Example       location   change function         var tag      option value     this  val        this  attr  mytag             setMyTag   val tag

User · Answer

Here is the entire script with an AJAX call to target a single list within a page with multiple lists   None of the other stuff above worked for me until I used the  id  attribute even though my attribute name is  ItemKey    By using the debugger   Chrome Debug  I was able to see that the selected option had attributes  with a map to the JQuery  id  and the value    lt html gt   lt head gt   lt script type  text JavaScript  src  https   ajax googleapis com ajax libs jquery 1 9 0 jquery min js  gt  lt  script gt   lt  head gt   lt body gt   lt select id  List1  gt  lt  select gt   lt select id  List2  gt   lt option id  40000  gt List item  1 lt  option gt   lt option id  27888  gt List item  2 lt  option gt   lt  select gt    lt div gt  lt  div gt   lt  body gt   lt script type  text JavaScript  gt    get a reference to the select element  select       List1       request the JSON data and parse into the select element   ajax   url   list json   dataType  JSON   success function data      clear the current content of the select  select html         iterate over the data and append a select option   each data List  function key  val    select append   lt option id      val ItemKey      gt     val ItemText     lt  option gt            error function       if there is an error append a  none available  option  select html   lt option id  -1  gt none available lt  option gt                 List1    change function      var optionSelected       List1 option selected   attr  id        div    text  optionSelected         lt  script gt   lt  html gt    Here is the JSON File to create          List           Sort  1   parentID  0   ItemKey  100   ItemText   ListItem- 1          Sort  2   parentID  0   ItemKey  200   ItemText   ListItem- 2          Sort  3   parentID  0   ItemKey  300   ItemText   ListItem- 3          Sort  4   parentID  0   ItemKey  400   ItemText   ListItem- 4          Hope this helps  thank you all above for getting me this far

User · Answer

The easiest one       location   find  option selected   attr  myTag

User · Answer

body   on  change     location   function e      var option      option selected   this  attr  myTag

User · Answer

Simpler syntax if one form   var option      option selected   attr  mytag        if more than one form   var option      select myform option selected   attr  mytag

User · Answer

You re pretty close   var myTag       selected   element  attr  myTag

User · Answer

Try this     function              location   change function             var element     this  find  option selected             var myTag   element attr  myTag                  setMyTag   val myTag

User · Answer

That because the element is the  Select  and not  Option  in which you have the custom tag   Try this      location option selected   attr  myTag     Hope this helps

User · Answer

Suppose you have many selects  This can do it       selectClass   change function        var optionSelected     this  find  option selected   attr  optionAtribute        alert optionSelected    this will show the value of the atribute of that option

User · Answer

You re adding the event handler to the  lt select gt  element  Therefore    this  will be the dropdown itself  not the selected  lt option gt    You need to find the selected  lt option gt   like this   var option      option selected   this  attr  mytag

User · Answer

Try this       location   change function                var element      option selected   this               var myTag   element attr  myTag                     setMyTag   val myTag                 In the callback function for change    this refers to the select  not to the selected option

[jquery] jQuery - getting custom attribute from selected option

Examples related to jquery