Display drop down on change of value of first drop down in form

JavaScript
1

Morning all,

I have a problem after i thought I had it working, and basically its to do with the a hidden drop down becoming visible on selection of a certain value in the drop down before.

Using the code below:


<script>
        $(document).ready(function (){
            $("#state1").change(function() {
                if ($(this).val() != "2") {
                    $("#foo1").show();
	      $("#foo2").show();
                }else{
                    $("#foo1").hide();
	      $("#foo2").hide();
                }
            });
</script>

<div style="position:relative; float:left">
<select name="foodSafety" size="1" id="state1">
<option value="">FoodCheck Module</option>
<option <?php if($fSafety == "1") echo "selected"; ?> value="1">Yes</option>
<option <?php if($fSafety == "2") echo "selected"; ?> value="2">No</option>
</select>
</div>

<div style="position:relative; width:80px; height:20px; float:left; margin-left:80px; display:none;" id="foo1">
<select name="food_Freq" size="1">
<option value="0">Frequency (Def: 0)</option>
<option <?php if($f_Freq == "0") echo "selected"; ?> value="0">0</option>
<option <?php if($f_Freq == "1") echo "selected"; ?> value="1">1</option>
<option <?php if($f_Freq == "2") echo "selected"; ?> value="2">2</option>
<option <?php if($f_Freq == "3") echo "selected"; ?> value="3">3</option>
<option <?php if($f_Freq == "4") echo "selected"; ?> value="4">4</option>
<option <?php if($f_Freq == "5") echo "selected"; ?> value="5">5</option>
<option <?php if($f_Freq == "6") echo "selected"; ?> value="6">6</option>
<option <?php if($f_Freq == "7") echo "selected"; ?> value="7">7</option>
<option <?php if($f_Freq == "8") echo "selected"; ?> value="8">8</option>
<option <?php if($f_Freq == "9") echo "selected"; ?> value="9">9</option>
<option <?php if($f_Freq == "10") echo "selected"; ?> value="10">10</option>
<option <?php if($f_Freq == "11") echo "selected"; ?> value="11">11</option>
<option <?php if($f_Freq == "12") echo "selected"; ?> value="12">12</option>
</select>
</div>

<div style="position:relative; width:160px; height:20px; float:left; margin-left:40px; display:none;" id="foo2">
Location: <input type="text" name="food_Loc" size="10" value="<? echo $f_Loc;?>" />
</div>

This works perfectly when the user first comes into the page to upload a new contract, but noticed it doesnt work when say the user clicks a contract thats already in the database to edit, and then the value of the first field is set to 2 already, and thus the other hidden fields should be showing, but they dont as no change has occured.

What is the solution to this, was thinking of a php if statement, but thought id post it on here to see if there a proper solution.

thanks