troubleshooting Question

Jquery show/hide div's based on option select

Avatar of Scott Fell
Scott FellFlag for United States of America asked on
JavaScriptjQuery
5 Comments1 Solution879 ViewsLast Modified:
The code below also on jsfiddle http://jsfiddle.net/Yn67S/1/ will show/hide the div's based on the option menu changing.  I would like to update the jquery code to allow for any one of the option values starting off selected and thus showing the appropriate div.

Thank you!

<select id="paywith">
    <option value="1" selected>1-Hourly</option>
    <option value="2">2-Per Diem</option>
    <option value="3">3-Fixed</option>
</select>

<div id="hourly">Hourly</div>
<div id="per_diem">Per Diem</div>
<div id="fixed">Fixed</div>¿
<script>
hideAllDivs = function () {
    $("#hourly").hide();
    $("#per_diem").hide();
    $("#fixed").hide();
};

handleNewSelection = function () {

    hideAllDivs();
    
    switch ($(this).val()) {
        case '1':
            $("#hourly").show();
        break;
        case '2':
            $("#per_diem").show();
        break;
        case '3':
            $("#fixed").show();
        break;
    }
};

$(document).ready(function() {
    
    $("#paywith").change(handleNewSelection);
    
    // Run the event handler once now to ensure everything is as it should be
    handleNewSelection.apply($("#project_billing_code_id"));
    
});¿
</script>
ASKER CERTIFIED SOLUTION
Jon Norman
Information Systems Manager
Join our community to see this answer!
Unlock 1 Answer and 5 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 5 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros