Show/Hide Div's Based On Select Box - PLEASE HELP!

I have been trying to get this to work for some time now and I'm so close! ANY help someone could give me on this would be GREATLY APPRECIATED!

I am using Javascript to show/hide div's based on a select box value. Here's what I am using (works!):

<script type="text/javascript">
$(document).ready(function(){

$('[class^=is]').hide();

$("#recip").change(function(){          
    var value = $("#recip option:selected").val();
    var theDiv = $(".is" + value);

 	$("input:checkbox").attr("checked", false); // Should unselect all boxes
    
    theDiv.slideDown();
    theDiv.siblings('[class^=is]').slideUp();

}); // End function

}); // End doc ready

</script>

HTML:

As for the HTML:

	<form action="newmessage.php" method="post">

	<label>To:</label>
	<select id="recip">
		<option value="" selected="selected">Select One</option>
		<option value="1">Entire Group(s)</option>
		<option value="2">Employee(s)</option>
	</select>

<div class="clear"> </div>

	<div class="is1">
	<label>Chose Group(s):</label>


	<div class="scrolling-area">

<input type="checkbox" name="rec_group[]" value="firstgroup"> First Group<br />
<input type="checkbox" name="rec_group[]" value="secondgroup"> Second Group<br />
<input type="checkbox" name="rec_group[]" value="thirdgropu"> Third Group<br />

	</div><!--end scrolling area -->
	
	<div class="clear"> </div>
	</div><!-- end is1 -->	


	<div class="is2">
	<label>Choose Employee(s):</label>

<div class="scrolling-area">

<input type="checkbox" name="rec_id" value="firstemployee">First Employee<br />
<input type="checkbox" name="rec_id" value="secondemployee">Second Employee<br />
<input type="checkbox" name="rec_id" value="thirdemployee">Third Employee<br />

</div><!--end scrolling area -->

	<div class="clear"> </div>
	</div><!-- end is2 -->	

HTML:

What this does is hide all the div's containing the word "is", which would hide all the checkboxes. When the user uses the select box to select either send a message to a group or employee, the appropriate select box will then be displayed. As I said, this is working perfectly.

The problem is I am making a page for the user to go back and edit a message. This involves pulling the info from MySQL and checking the appropriate boxes by default. I can do this, but I can't get it to work with this show/hide script.

I need to find some way to automatically show the select box which would be checked on pageload. For example, if a message is to "Second Employee", I need the div "is2" to be shown automatically, not onchange of another select box.

What I'm trying to do is simple- I hope I haven't made it sound too complicated. Does anyone have any suggestions????

Thanks in advance!

 

P.S.-

Just to let you know the direction I've been leaning, I've been trying something like this which is not working:

if ($('#recip option:selected').val() == "1" ) {
	
	 var theNewDiv = $(".is1");
	theNewDiv.show();
	
}

HTML: