Question

I would like to display a div id based on the class of an initial select value. Ideally, all divs would be hidden initially, and only the div with the ID that matched the class of the select dropdown would be displayed. Thus, selection A or D below would both display div ID a.

My current code looks like this:`

<select name="milestone_tag" id="milestone_tag"
  <option value="1" class="a">Selection A
  <option value="2" class="b">Selection B</option>
  <option value="3" class="a-b">Selection C</option>
  <option value="4" class="a">Selection D</option>
</select>
<div id="a">
  <input name="milestone_a" />
</div>
<div id="b">
  <input name="milestone_b" />
<div id="a-b">
  <input name="milestone_a" />
  <input name="milestone_b" />
</div>

$('#milestone_tag').change(function() {
$("#a,#b,#a-b").hide();
$($(this).find('option:selected').attr('class')).show();
});

Any help would be greatly appreciated!

Answer 1

You’re only passing in the class name of the option you need to need to prefix it with a selector type. In this case an id of a div

You’re basically doing this
$('a').show(); when it needs to be $('#a').show();

$('#' + $(this).find('option:selected').attr('class')).show();