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:

<select id="band_type_choices">
    <option vlaue="0"></option>
    <option value="100" name="acoustic">Acoustic</option>
    <option value="0" name="jazz">Jazz/Easy Listening</option>
    <option value="0" name="acoustic_jazz">Acoustic + Jazz/Easy Listening</option>
    <option value="0" name="party">Party</option>
    <option value="0" name="acoustic_party">Acoustic + Party</option>
    <option value="0" name="jazz_party">Jazz/Easy Listening + Party</option>
    <option value="0" name="acoustic_jazz_party">Acoustic + Jazz/Easy Listening + Party</option>
 </select>

and an example of one of the lists:

<div class="checkboxlist" id="checkboxlist_acoustic" style="display:none;">
<input type="checkbox" class="checkbox keys" name="keys" value="100" />Keys<br>
<input type="checkbox" class="checkbox acou_guit" name="acou_guit" value="100" />Acoustic Guitar<br>
<input type="checkbox" class="checkbox drums" name="drums" value="100" />Drums<br>
<input type="checkbox" class="checkbox alt_sax" name="alt_sax" value="100" />Alto Sax<br>
<input type="checkbox" class="checkbox ten_sax" name="ten_sax" value="100" />Tenor Sax<br>
<input type="checkbox" class="checkbox clarinet" name="clarinet" value="100" />Clarinet<br>
<input type="checkbox" class="checkbox trombone" name="trombone" value="100" />Trombone<br>
<input type="checkbox" class="checkbox trumpet" name="trumpet" value="100" />Trumpet<br>
<input type="checkbox" class="checkbox flute" name="flute" value="100" />Flute<br>
<input type="checkbox" class="checkbox cello" name="cello" value="100" />Cello<br>
<input type="checkbox" class="checkbox violin" name="violin" value="100" />Violin<br>
</div>

That is invalid html. There is no name attribute on a select — mplungjan, Sep 09 '13 at 12:09

score 58 · Answer 1 · edited May 23 '17 at 12:26

58

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();

edited May 23 '17 at 12:26

Community

1
1

answered Jun 16 '14 at 19:37

jgerman

1,023
8
14

score 48 · Accepted Answer · answered Sep 09 '13 at 12:11

48

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");

answered Sep 09 '13 at 12:11

Mohammad Adil

43,337
17
86
109

21

use `.text();` instead of `.attr("name");` to get the text of selected option as asked in question – Jimmy Obonyo Abor Dec 30 '15 at 16:52

score 6 · Answer 3 · edited Jun 26 '19 at 07:46

6

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...

edited Jun 26 '19 at 07:46

Md.Sukel Ali

2,364
5
18
28

answered Jun 26 '19 at 06:53

Gowtham Ag

167
2
5

This is exatly what i wanted. Thanks. – Laércio Lopes Aug 10 '19 at 16:01

Rory McCrossan · Answer 4 · 2017-01-30T10:21:10.833

5

Firstly name isn't a valid attribute of an option element. Instead you could use a data parameter, like this:

<option value="foo" data-name="bar">Foo Bar</option>

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.

edited Jan 30 '17 at 10:21

answered Sep 09 '13 at 12:09

Rory McCrossan

306,214
37
269
303

This is a valid and good answer. If there are better ways, then go ahead ... – japes Sophey Dec 23 '19 at 10:29
@tonygil I have absolutely no idea what your comment is rambling about. It makes no sense whatsoever. I can only presume you're replying to a comment before your which was deleted? – Rory McCrossan Dec 23 '19 at 10:29

score 4 · Answer 5 · answered Sep 09 '13 at 12:10

4

 $(this).attr("name")

means the name of the select tag not option name.

To get option name

 $("#band_type_choices option:selected").attr('name');

answered Sep 09 '13 at 12:10

Manu M

1,065
5
17

mplungjan · Answer 6 · 2018-11-05T10:31:06.770

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

var names = ["", "acoustic", "jazz", "acoustic_jazz", "party", "acoustic_party", "jazz_party", "acoustic_jazz_party"];

$(function() {
  $('#band_type_choices').on('change', function() {
    $('.checkboxlist').hide();
    var idx = this.selectedIndex;
    if (idx > 0) $('#checkboxlist_' + names[idx]).show();
  });
});

.checkboxlist { display:none }

Choose acoustic to see the corresponding div

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

jQuery get the name of a select option

6 Answers6

Linked