JavaScript - Show / Hide Div based on form selection (postback)

Question

I have a form which I am using to update an existing set of information in a database. Within it is a selection box, when option 'B' is chosen it shows a hidden section, and on option 'A' it will hide the section. This works fine.

However, when I load a record set from the database and the selection box is set to option 'B' to show the hidden div, it is not shown.

This is because I'm switching the DIV tag using 'onchange'.

How do I get the JS to show the DIV tag correctly onload of the record set? Currently to see the data I have to toggle the selection box between the two options.

I know next to nothing about JS, the JS below isn't mine, I'd appreciate some help.

Thanks

<!--- show / hide DIV based on select --->

<script type="text/javascript"><!--
var lastDiv = "";
function showDiv(divName) {
    // hide last div
    if (lastDiv) {
        document.getElementById(lastDiv).className = "hiddenDiv";
    }
    //if value of the box is not nothing and an object with that name exists, then change the class
    if (divName && document.getElementById(divName)) {
        document.getElementById(divName).className = "visibleDiv";
        lastDiv = divName;
    }
}
//-->
</script>
<style type="text/css" media="screen"><!--
.hiddenDiv {
    display: none;
    }
.visibleDiv {
    display: block;
    border: 0px grey solid;
    }

--></style>
<!--- end DIV hide --->



--------------snip----------



  <select name="ad_i" id="ad_i" onchange="showDiv(this.value);">
      <option value="in" <? echo $adtypea; ?> >Option A </option>
      <option value="ba" <? echo $adtypeb; ?> >Option B</option>
   </select>

   <!--- start hiding DIV --->

  <div class="hiddenDiv" id="ba">

  <br /><br />Coding for Ad<br />

<select name="ad_type" id="ad_type">
      <option value="html" <? echo $codestylea; ?> >HTML</option>
      <option value="adsense"<? echo $codestylef; ?>>Adsense / Other JavaScript Code</option>
      <option value="img" default="default" <? echo $codestyleb; ?>>Image</option>
      <option value="swf" <? echo $codestylec; ?>>Flash</option>
   </select>


   </div>
   <!--- end Div for hidden--->

Answer 1

After you've rendered the select box and the div's you want to show/hide call:

<script type="text/javascript">
var selectbox = document.getElementById("ad_i");
showDiv(selectbox.options[selectbox.selectedIndex].value);
</script>

so I think it should go after

<!--- end Div for hidden--->

Answer 2

<script type="text/javascript">

    $(document).ready(function(){
    $('#bl_cat').on('change', function() {
      if ( this.value == 'vid')
      //.....................^.......
      {
        $("#dis-vid").show();
        $("#dis-img").hide();  
      }
      else
      {
        $("#dis-img").show();  
        $("#dis-vid").hide();
      }
    });
});
</script>