I am having a bit of a problem,I have 1 dropdown menu which has data coming from PHP.

When there is a selection on that dropdown menu, it should either activate the show() or hide() function for the other inputs or dropdown menu below it. It works great at the moment but if I reload the page and the dropdown is already set to the required selection, the jquery script is not hiding or showing the other blocks. How to get jquery to act on page load please?

Here is my code:

1.     <script>
           $(document).ready(function(e) {
               $('#categories_id').change(function() {
                   if ($(this).val() == '1') {
                       $('.show-hide').show();
                   } else {
                       $('.show-hide').hide();
                   }
               });
           });
   
       </script>

1. <div class="form-group">
    <label for="Talents Categories">I want to register in the category of:</label>
   
   <select class="form-control" name="categories_id" id="categories_id">
                           <?php show_talents_categories(); ?>
                       </select>
                   </div>
   
                   <div class="show-hide">
                       <div class="form-group">
                           <label for="Talents Sex">Sex</label>
   
   <select class="form-control" name="talents_sex">
                               <option value="man">Man</option>
                               <option value="woman">Women</option>
                           </select>
                       </div>
                   </div>

1. <option value="1" id="1">Models</option>
   <option value="2" id="2">Artist</option>

Thanks in advance!