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

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_

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 > 0) $('#checkboxlist_' + names[idx]).show();_x000D_
  });_x000D_
});

_x000D_

.checkboxlist { display:none }

_x000D_

Choose acoustic to see the corresponding div_x000D_
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<select id="band_type_choices">_x000D_
  <option vlaue="0"></option>_x000D_
  <option value="100" name="acoustic">Acoustic</option>_x000D_
  <option value="0" name="jazz">Jazz/Easy Listening</option>_x000D_
  <option value="0" name="acoustic_jazz">Acoustic + Jazz/Easy Listening</option>_x000D_
  <option value="0" name="party">Party</option>_x000D_
  <option value="0" name="acoustic_party">Acoustic + Party</option>_x000D_
  <option value="0" name="jazz_party">Jazz/Easy Listening + Party</option>_x000D_
  <option value="0" name="acoustic_jazz_party">Acoustic + Jazz/Easy Listening + Party</option>_x000D_
</select>_x000D_
<div class="checkboxlist" id="checkboxlist_acoustic">_x000D_
  <input type="checkbox" class="checkbox keys" name="keys" value="100" />Keys<br>_x000D_
  <input type="checkbox" class="checkbox acou_guit" name="acou_guit" value="100" />Acoustic Guitar<br>_x000D_
  <input type="checkbox" class="checkbox drums" name="drums" value="100" />Drums<br>_x000D_
  <input type="checkbox" class="checkbox alt_sax" name="alt_sax" value="100" />Alto Sax<br>_x000D_
  <input type="checkbox" class="checkbox ten_sax" name="ten_sax" value="100" />Tenor Sax<br>_x000D_
  <input type="checkbox" class="checkbox clarinet" name="clarinet" value="100" />Clarinet<br>_x000D_
  <input type="checkbox" class="checkbox trombone" name="trombone" value="100" />Trombone<br>_x000D_
  <input type="checkbox" class="checkbox trumpet" name="trumpet" value="100" />Trumpet<br>_x000D_
  <input type="checkbox" class="checkbox flute" name="flute" value="100" />Flute<br>_x000D_
  <input type="checkbox" class="checkbox cello" name="cello" value="100" />Cello<br>_x000D_
  <input type="checkbox" class="checkbox violin" name="violin" value="100" />Violin<br>_x000D_
</div>

_x000D_

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

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

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

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

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

[jquery] jQuery get the name of a select option

Examples related to jquery

Examples related to hide

Examples related to attr