refactor javascript - show and hide fields based on current selection 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

&lt;select name="state" id="state"&gt;
    &lt;option value=""&gt;&lt;/option&gt;
    &lt;option value="NY"&gt;NY&lt;/option&gt;
    &lt;option value="CA"&gt;CA&lt;/option&gt;
&lt;/select&gt;

&lt;div id="high-schools"&gt;
    &lt;select name="high_school_id" id="high_school"&gt;
        &lt;option value=""&gt;&lt;/option&gt;
        &lt;option value="1"&gt;Degrassi High&lt;/option&gt;
        &lt;option value="2"&gt;Bayside High&lt;/option&gt;
    &lt;/select&gt;
&lt;/div&gt;

&lt;div id="other_high_school"&gt;
    &lt;p&gt;Enter hs if your school is not listed above 
        &lt;input type="text" name="other_high_school" id="other-hs-field" /&gt;&lt;/p&gt;
&lt;/div&gt;
​
$(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 &amp;&amp; state) {
    $("#other_high_school").hide();
    $("#other-hs-field").val('');
  }

  if(!high_school &amp;&amp; state) {
    $("#other_high_school").show();
  }
}
I will give you a sample which is very simplified. I hope you can understand what I am doing here. 

HTML

&lt;select class="toggle-data"&gt;
    &lt;option&gt;&lt;/option&gt;
    &lt;option value="1" data-toggle="#foo-one"&gt;foo one&lt;/option&gt;
    &lt;option value="2" data-toggle="#foo-two"&gt;foo two&lt;/option&gt;
&lt;/select&gt;

&lt;div id="foo-one" style="display: none;"&gt;
    foo one
&lt;/div&gt;

&lt;div id="foo-two" style="display: none;"&gt;
    foo two
&lt;/div&gt;


​
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.