Question

I have the following select field and based on whether the class .show-x-trend or show-x is selected I would like to conditionally reveal a separate div. If .show-x-trend <option> is selected, I’d like to reveal the already hidden #x-axis-trend-wrap <div> and if show-x option is selected I’d like to reveal the already hidden #x-axis-wrap <div>. In the code below, you’ll see that I have both CSS classes and also values assigned to the 3 selection options because I tried to achieve the effect a few different ways but so far with no luck.

<div id="visualize-wrap">
    <h3>Visualization Shows</h3>
    <select id="visualize-shows" name="visualize">
        <option class="no-show" value="00">Select One</option>
        <option class="show-x-trend" value="01">Trend Over Time</option>
        <option class="show-x" value="02">Breakdown of Sum Total</option>
        <option class="show-x" value="03">Side-by-side Comparison</option>
    </select>
</div>

Answer 1

You can use hasClass method to determine if the selected option contains the required class or not and act accordingly.

$('#visualize-shows').change(function(){
    var $selectedOption = $(this).find('option:selected');
    $('#x-axis-trend-wrap')
    .toggle( $selectedOption.hasClass('show-x-trend'));
    $('#x-axis-wrap')
    .toggle( $selectedOption.hasClass('show-x'));
});

Working demo – http://jsfiddle.net/X2dPt/