Avatar of Scott Fell
Scott Fell
Flag for United States of America asked on

Jquery show/hide div's based on option select

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

jQueryJavaScript

Avatar of undefined
Last Comment
Scott Fell

8/22/2022 - Mon
Jon Norman

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 Fell

ASKER
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.
VisionAmp

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

This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
ASKER CERTIFIED SOLUTION
Jon Norman

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Scott Fell

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