Question

What is the best way to add another class to this script:

<script type="text/javascript">
    $(document).ready(function(){
     $('.carlocation').hide();
      $('#parking-options').change(function() {
        $('.carlocation').hide();
        $('#' + $(this).val()).show();
     });
    });
</script>

I am fine with the same ID displaying this classes, I am just unsure about how to add another class to this script. As '.carlocation' , '.insertclass' or '.carlocation .insertclass' does nothing but break the script.

Thanks!

EDIT – The rest of the markup.

I would like .carlocation and .car-position to start off as two hidden divs but in the first drop down when “Self parking” is selected that the other two selections display.

<li>
                    <label for="select-choice-0" class="select">Parking Method:</label>
                    <select name="select-choice-15" id="parking-options" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
                       <option value="">Select One</option>
                       <option value="self">Self Parking</option>
                       <option value="auto">Valet Parking</option>
                    </select>
                </li>
                <li>
                    <div id="self" class="carlocation">
                    <h1>Enter Car Location:</h1>
                    <label for="select-choice-0" class="select">Floor:</label>
                    <select name="select-choice-15" id="location-floor" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
                       <option value="">Floor Select</option>
                       <option value="f1">F1</option>
                       <option value="f2">F2</option>
                       <option value="f3">F3</option>
                       <option value="f4">F4</option>
                    </select>
                    </div>
                </li>
                <li>
                <div id="self" class="car-position">
                <label for="select-choice-0" class="select">Row:</label>
                <select name="select-choice-15" id="position-row" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
                       <option value="">Row Select</option>
                       <option value="1">1</option>
                       <option value="2">2</option>
                       <option value="3">3</option>
                       <option value="4">4</option>
                       <option value="5">5</option>
                       <option value="6">6</option>
                       <option value="7">7</option>
                </select>
                <li>

Answer 1

Hide your elements with CSS:

.carlocation, .car-position {
    display: none;
}

Remove the repeated “self” id from both of the divs, and instead add the “self” value to the class attribute on both:

<li>
    <div class="self carlocation">
        <!-- ... -->
    </div>
</li>
<li>
    <div class="self car-position">
        <!-- ... -->
    </div>
</li>

Side Note: Your second div was missing its closing tag.

Then bind to the change event of the form:

$("#parking-options").on("change", function(){
    $("div.self").toggle( $(this).val() === "self" );
});​​​​​​​​​​

This bases the visibility of all .self divs on the value of the select being “self”. If “self” is selected, all div.self items will become visible. Otherwise, they become hidden.

Fiddle: http://jsfiddle.net/jonathansampson/5KJV5/

Or you could slide them into view:

$("#parking-options").on("change", function(){
    $(this).val() === "self"
        ? $("div.self").slideDown()
        : $("div.self").slideUp();
});​

Fiddle: http://jsfiddle.net/jonathansampson/5KJV5/2/