js hide function

Question

When the page is loaded (the first dropdown (div StatusID) is dynamically populated from the mysql db) or the user selects Unemployed - EI from the first dropdown box, the div status_sub_6 shows the second select statement.

My .hide .show function activates fine on change but the function hides the second dropdown list on the loading of the page even if the dynamically populated values of the first select (StatusID) meet the compare criteria.

I'm sure that I need an onload function which overrides the following .js code but would really appreciate a bit of help in composing the additional code.

JavaScript:

$(document).ready(function(){
    $('#status_sub_6').hide();

     $('#StatusID').change(function () {
        if ($('#StatusID option:selected').text() == "Unemployed - EI"){
            $('#status_sub_6').show();
        }
         else { 
              $('#status_sub_6').hide();
         }
    });
});

techfoobar · Accepted Answer · 2013-03-26 18:37:00Z

1

You can do this by triggering a change event right after load.

$(document).ready(function(){
    ...
    // your current code
    ...
    $('#StatusID').trigger('change'); // trigger a change
});

answered Mar 26, 2013 at 18:37

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Huangism Over a year ago

only trigger on load when criteria met

techfoobar Over a year ago

@Huangism - The criteria is being checked inside the change handler.

Aquatwit Over a year ago

I chose this one as it seemed the most logical to me and funtioned exactly as I needed. You guys are great. I hope to be able to contribute to someone else's problem in the future as many have helped me. Thanks

GGio · Accepted Answer · 2013-03-26 18:39:30Z

0

try:

$(function() {
   $('#status_sub_6').hide();
   $(document).on('change', '#StatusID', function () {
      if ($('#StatusID option:selected').text() == "Unemployed - EI"){
        $('#status_sub_6').show();
      }
      else { 
        $('#status_sub_6').hide();
      }
   });

   $('#StatusID').change();
});

edited Mar 26, 2013 at 18:39

answered Mar 26, 2013 at 18:33

GGio

7,67311 gold badges48 silver badges85 bronze badges

Comments

spadelives · Accepted Answer · 2013-03-26 18:45:41Z

You could also do this:

$(document).ready(function(){
    if ($('#StatusID option:selected').text() == "Unemployed - EI"){
        $('#status_sub_6').hide();
    }

     $('#StatusID').change(function () {
        if ($('#StatusID option:selected').text() == "Unemployed - EI"){
            $('#status_sub_6').show();
        }
         else { 
              $('#status_sub_6').hide();
         }
    });
});

or a bit more elegant solutions:

$(document).ready(function () {
    toggleSub();

    $('#StatusID').change(function () {
        toggleSub();
    });
});

function toggleSub() {
    if ($('#StatusID option:selected').text() == "Unemployed - EI") {
        $('#status_sub_6').hide();
    }
    else {
        $('#status_sub_6').show();
    }
}

Collectives™ on Stack Overflow

js hide function

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related