I need help refactoring the javascript. http://jsfiddle.net/BDLYP/

I was able to hide and show fields, but I know this can be improved upon.

If #state is empty, hide #high-schools and #other_high_schools

If #state is picked, show #high-schools and show #other_high_schools (if #high-schools is empty)

I imagine the multiple .live can be cut down. I am fairly new to javascript/jQuery

I need help refactoring the javascript. http://jsfiddle.net/BDLYP/

I was able to hide and show fields, but I know this can be improved upon.

If #state is empty, hide #high-schools and #other_high_schools

If #state is picked, show #high-schools and show #other_high_schools (if #high-schools is empty)

I imagine the multiple .live can be cut down. I am fairly new to javascript/jQuery

<select name="state" id="state">
 <option value=""></option>
 <option value="NY">NY</option>
 <option value="CA">CA</option>
</select>
<div id="high-schools">
 <select name="high_school_id" id="high_school">
 <option value=""></option>
 <option value="1">Degrassi High</option>
 <option value="2">Bayside High</option>
 </select>
</div>
<div id="other_high_school">
 <p>Enter hs if your school is not listed above 
 <input type="text" name="other_high_school" id="other-hs-field" /></p>
</div>
​
$(document).ready(function() {
 checkHighSchool();
 $('#high_school').live('change', function() {
 checkHighSchool();
 }); 
 $('#state').live('change', function() {
 checkHighSchool();
 }); 
});
function checkHighSchool() {
 var state = $("#state").val();
 var high_school = $("#high_school").val();
 if(state) {
 $("#high-schools").show();
 }
 if(!state) {
 $("#other_high_school").hide();
 $("#high-schools").hide();
 $("#other-hs-field").val('');
 //alert('no state selected');
 }
 if(high_school && state) {
 $("#other_high_school").hide();
 $("#other-hs-field").val('');
 }
 if(!high_school && state) {
 $("#other_high_school").show();
 }
}