Show and Hide a div based from drop down list

Show and Hide a div based from drop down list.  I have three status, Approved, Pending or Rejected. The problem I'm having is when the default value is "Approved" or "Pending" the text box that I'm trying to hide is still visible.  Once inside the drop down list I can toggle the selection and it will then show or hide the text box correctly.  I would like to have this functionality work on the page load.

I have tried both CSS and Jquery and I'm haivng the same issue with both.  

Text Box

 <div id="hideRejectReason">
                        @Html.EditorFor(model => model.rejection_reason)
                </div>

Select allOpen in new window

 function show() {

        var select_status = $('#select').val();
       
        if (select_status == 'Rejected') {
            $('#hideRejectReason').show();          
        }

        else {
            $('#hideRejectReason').hide();          
        }

    }

Select allOpen in new window

  function show() {

        var select_status = $('#select').val();

        if (select_status == 'Rejected') {
            $('#hideRejectReason').css('display', 'block');         
        }

        else {
            $('#hideRejectReason').css('display', 'none');
        }

    }

Select allOpen in new window