Show form field based on select value in jquery

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 forgot # in front of your selector. Good practice to pot your jQuery code in

$(document).ready

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

jSFiddle

Answer 2

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

Answer 3

You need to add the selector to let jQuery know that you want it to be either a class or id because .attr() does not add the selector, only the value of the attribute:

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

For id :

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

Hope this helps.

Answer 4

The class-selector looks like this .class while .attr() return class without the . . Therefore, this line:

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

Would have to be like this to work:

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

Answer 5

I would try something along the lines of:

<select name="milestone_tag" id="milestone_tag">
    <option value="1" class="a">Selection A</option>
    <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" class="milestone">
    <input name="milestone_a" value="milestone a" />
</div>
<div id="b" class="milestone">
    <input name="milestone_b" value="milestone b" />
</div>
<div id="a-b" class="milestone">
    <input name="milestone_a" value="milestone a" />
    <input name="milestone_b" value="milestone b" />
</div>

$(document).ready(function(){
    var $milestones = $(".milestone"),
        $selector = $('#milestone_tag');

    $selector.change(function() {
        var selected = $selector.find('option:selected').attr('class');

        $milestones.hide();
        $('#' + selected + '.milestone').show();
    });
});

http://jsfiddle.net/userdude/ScWVZ/1/

A slightly more "complex" example that first tests and creates a local data value with the relevant id selectors, comma-separated, the is then used to display the related elements. Note the use of a (non-existent) c , and that a and b are not duplicate for the ab case.

http://jsfiddle.net/userdude/ScWVZ/3/