Link to home
Start Free TrialLog in
Avatar of Scott Fell
Scott FellFlag 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

Avatar of Jon Norman
Jon Norman
Flag of United Kingdom of Great Britain and Northern Ireland image

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
Avatar of 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.
Avatar of VisionAmp
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

ASKER CERTIFIED SOLUTION
Avatar of Jon Norman
Jon Norman
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks!  I think I just forked that from something else and didn't catch the jquery didn't get save. Thank you.