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>
$(this).attr("name")
means the name of the select tag not option name.
To get option name
$("#band_type_choices option:selected").attr('name');
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...
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.
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"];_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_
});.checkboxlist { display:none }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>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();
Source: Stackoverflow.com