Jquery show/hide div's based on option select

Scott Fell
Scott Fell used Ask the Experts™
on
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>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Jon NormanInformation Systems Manager
Top Expert 2012

Commented:
try:

<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>
$(document).ready(function() {
    divs={"1":"hourly","2":"per_diem","3":"fixed"};
    $("#paywith").change(function() {
        $(this).children().each(function() {
            if ($(this).is(":selected")) {
                $("#" + divs[$(this).val()]).show();
            } else {
                $("#" + divs[$(this).val()]).hide();
            }
        });
    }).change();
});
</script>

Open in new window


You don't need any of the other code - it shows / hides the divs properly on document ready and on change
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Author

Commented:
Thank you Jon.  
This does not seem to work though http://jsfiddle.net/LHwmn/

What I am expecting is only one pre selected div will show until there is a change in the menu.  When I checked this in jsfiddle all divs seem to be shown and nothing changes when the option menu changes.

Thank you.
Just run the function on load and change a few other things to do so

hideAllDivs = function () {
    $("#hourly").hide();
    $("#per_diem").hide();
    $("#fixed").hide();
};

handleNewSelection = function () {

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

$(document).ready(function() {
    
    $("#paywith").change(handleNewSelection);
    handleNewSelection();
    // Run the event handler once now to ensure everything is as it should be
    handleNewSelection.apply($("#project_billing_code_id"));
    
});¿

Open in new window

Information Systems Manager
Top Expert 2012
Commented:
I've updated your fiddle - you hadn't loaded jQuery - you need to pick it from the menu on the left, by default it loads mootools, which you don't need.

http://jsfiddle.net/LHwmn/1/
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Author

Commented:
Thanks!  I think I just forked that from something else and didn't catch the jquery didn't get save. Thank you.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial