jQuery get the name of a select option

Question

I have a dropdown list with several option  each option has a name attribute  When I select an option  a different list of checkboxes needs to appear - when another options is selected  that checkbox list should disappear and another one be displayed   I have created these checkbox lists and given them an ID that correlates to the name attribute of the option selected  I am trying to use the following code to display the correct checkbox list    document  ready function                band type choices   on  change   function                      checkboxlist   hide            checkboxlist       this  attr  name     css  display    block           However nothing is happening   Here is my dropdown options    lt select id  band type choices  gt       lt option vlaue  0  gt  lt  option gt       lt option value  100  name  acoustic  gt Acoustic lt  option gt       lt option value  0  name  jazz  gt Jazz Easy Listening lt  option gt       lt option value  0  name  acoustic jazz  gt Acoustic   Jazz Easy Listening lt  option gt       lt option value  0  name  party  gt Party lt  option gt       lt option value  0  name  acoustic party  gt Acoustic   Party lt  option gt       lt option value  0  name  jazz party  gt Jazz Easy Listening   Party lt  option gt       lt option value  0  name  acoustic jazz party  gt Acoustic   Jazz Easy Listening   Party lt  option gt    lt  select gt    and an example of one of the lists    lt div class  checkboxlist  id  checkboxlist acoustic  style  display none   gt   lt input type  checkbox  class  checkbox keys  name  keys  value  100    gt Keys lt br gt   lt input type  checkbox  class  checkbox acou guit  name  acou guit  value  100    gt Acoustic Guitar lt br gt   lt input type  checkbox  class  checkbox drums  name  drums  value  100    gt Drums lt br gt   lt input type  checkbox  class  checkbox alt sax  name  alt sax  value  100    gt Alto Sax lt br gt   lt input type  checkbox  class  checkbox ten sax  name  ten sax  value  100    gt Tenor Sax lt br gt   lt input type  checkbox  class  checkbox clarinet  name  clarinet  value  100    gt Clarinet lt br gt   lt input type  checkbox  class  checkbox trombone  name  trombone  value  100    gt Trombone lt br gt   lt input type  checkbox  class  checkbox trumpet  name  trumpet  value  100    gt Trumpet lt br gt   lt input type  checkbox  class  checkbox flute  name  flute  value  100    gt Flute lt br gt   lt input type  checkbox  class  checkbox cello  name  cello  value  100    gt Cello lt br gt   lt input type  checkbox  class  checkbox violin  name  violin  value  100    gt Violin lt br gt   lt  div gt

User · Answer

Firstly name isn t a valid attribute of an option element  Instead you could use a data parameter  like this    lt option value  foo  data-name  bar  gt Foo Bar lt  option gt    The main issue you have is that the JS is looking at the name attribute of the select element  not the chosen option  Try this       band type choices   on  change   function                      checkboxlist   hide            checkboxlist        option selected   this  data  name    css  display    block          Note the option selected selector within the context of the select which raised the change event

User · Answer

In your codethis refers to the select element not to the selected option  to refer the selected option you can do this -    this  find  option selected   attr  name

User · Answer

Using name on a select option is not valid   Other have suggested the data- attribute  an alternative is a lookup table   Here the  this  refers to the select so no need to  find  the option   x000D   x000D  var names         acoustic    jazz    acoustic jazz    party    acoustic party    jazz party    acoustic jazz party    x000D   x000D    function     x000D        band type choices   on  change   function     x000D          checkboxlist   hide    x000D      var idx   this selectedIndex  x000D      if  idx  gt  0      checkboxlist     names idx   show    x000D        x000D      x000D   checkboxlist   display none   x000D  Choose acoustic to see the corresponding div 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 id  band type choices  gt  x000D     lt option vlaue  0  gt  lt  option gt  x000D     lt option value  100  name  acoustic  gt Acoustic lt  option gt  x000D     lt option value  0  name  jazz  gt Jazz Easy Listening lt  option gt  x000D     lt option value  0  name  acoustic jazz  gt Acoustic   Jazz Easy Listening lt  option gt  x000D     lt option value  0  name  party  gt Party lt  option gt  x000D     lt option value  0  name  acoustic party  gt Acoustic   Party lt  option gt  x000D     lt option value  0  name  jazz party  gt Jazz Easy Listening   Party lt  option gt  x000D     lt option value  0  name  acoustic jazz party  gt Acoustic   Jazz Easy Listening   Party lt  option gt  x000D   lt  select gt  x000D   lt div class  checkboxlist  id  checkboxlist acoustic  gt  x000D     lt input type  checkbox  class  checkbox keys  name  keys  value  100    gt Keys lt br gt  x000D     lt input type  checkbox  class  checkbox acou guit  name  acou guit  value  100    gt Acoustic Guitar lt br gt  x000D     lt input type  checkbox  class  checkbox drums  name  drums  value  100    gt Drums lt br gt  x000D     lt input type  checkbox  class  checkbox alt sax  name  alt sax  value  100    gt Alto Sax lt br gt  x000D     lt input type  checkbox  class  checkbox ten sax  name  ten sax  value  100    gt Tenor Sax lt br gt  x000D     lt input type  checkbox  class  checkbox clarinet  name  clarinet  value  100    gt Clarinet lt br gt  x000D     lt input type  checkbox  class  checkbox trombone  name  trombone  value  100    gt Trombone lt br gt  x000D     lt input type  checkbox  class  checkbox trumpet  name  trumpet  value  100    gt Trumpet lt br gt  x000D     lt input type  checkbox  class  checkbox flute  name  flute  value  100    gt Flute lt br gt  x000D     lt input type  checkbox  class  checkbox cello  name  cello  value  100    gt Cello lt br gt  x000D     lt input type  checkbox  class  checkbox violin  name  violin  value  100    gt Violin lt br gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The Code is very Simple  Lets Put This Code  var name       band type choices  option selected   text      Here You don t want to use   this  find   text    directly you can put your id name and add  option selected along with text     This will return the result option name  Better Try this

User · Answer

this  attr  name      means the name of the select tag not option name    To get option name       band type choices option selected   attr  name

User · Answer

For anyone who comes across this late  like me   As others have stated  name isn t a valid attribute of an option element   Combining the accepted answer above with the answer from this other question  you get     this  find  option selected   text

[jquery] jQuery get the name of a select option

Examples related to jquery

Examples related to hide

Examples related to attr