refactor javascript - show and hide fields based on current selection

Question

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();
  }
}

Answer 1

I will give you a sample which is very simplified. I hope you can understand what I am doing here.

HTML

<select class="toggle-data">
    <option></option>
    <option value="1" data-toggle="#foo-one">foo one</option>
    <option value="2" data-toggle="#foo-two">foo two</option>
</select>

<div id="foo-one" style="display: none;">
    foo one
</div>

<div id="foo-two" style="display: none;">
    foo two
</div>

​ JS/jQuery

$('.toggle-data').on('change', function() {
    var toggle = this.options[this.selectedIndex].getAttribute('data-toggle'),
        toggle_class = 'unique_classname';
    $('.'+toggle_class+', '+toggle).toggle().removeClass(toggle_class);
    $(toggle).addClass(toggle_class);
});
​

Now you have a single function to do all of your show/hiding and you would just format you html accordingly.