The reason it's not hiding anything on load, is because your logic for showing/hiding rows is set only to run when the *Project Type* dropdown changes. To have it run as soon as the page loads you need to execute your show/hide logic before or after your .change event wiring: $(document).ready(function(){ //Show/hide columns based on Drop Down Selection on page load ShowHideFields(); $("select[title='Project Type']").change(function() { ShowHideFields();//only runs on dropdown change }); }); function ShowHideFields() { if ($("select[title='Project Type']").val() != "Ad") { $('nobr:contains("Vendor Contact")').closest('tr').hide(); $('nobr:contains("Sponsorship")').closest('tr').hide(); $('nobr:contains("Level")').closest('tr').hide(); } else { $('nobr:contains("Vendor Contact")').closest('tr').show(); $('nobr:contains("Sponsorship")').closest('tr').show(); $('nobr:contains("Level")').closest('tr').show(); } if ($("select[title='Project Type']").val() != "Focused On") { $('nobr:contains("Focus")').closest('tr').hide(); } else { $('nobr:contains("Focus")').closest('tr').show(); } if ($("select[title='Project Type']").val() != "Pitch") { $('nobr:contains("Pitch Company")').closest('tr').hide(); } else { $('nobr:contains("Pitch Company")').closest('tr').show(); } if ($("select[title='Project Type']").val() != "Other") { $('nobr:contains("If Other")').closest('tr').hide() } else { $('nobr:contains("If Other")').closest('tr').show(); } } Also, if you don't want to have users see the hidden fields before the document.ready executes, hide the content by default using CSS, then show it if the conditions are met on load in your javascript. That way people never see stuff they're not supposed to see. The fastest way to do this is to modify the form directly. So you could go to the desired rows in your form(s) and make it: <tr style="display:none"> Or you can do it by adding the id tag to the desired rows, then setting those id's to `display:none` in a css block.