JQUERY Auto populate 3 select html fields with XML data using onchange

I am trying to use jquery to auto populate select fields and I can get the first two to work without problems, but the third select statements doesn't get any data.

I could really use some hints one what I need to do for this.

HTML and JQUERY

<script type="text/javascript">
$(document).ready(function() {
var building_data; 
$.get('courses.xml', function(data) { 
    building_data = data; 

    var that = $('#building'); 
    $('building', building_data).each(function() { 

        $('<option>').text($(this).attr('title')).appendTo(that);
    });
}, 'xml'); 

$('#building').change(function() { 

    var val = $(this).val(); 
    var that = $('#floor').empty(); 

    $('building', building_data).filter(function() { 
        return val == $(this).attr('title'); 
    }).find('floor').each(function() { 

        $('<option>').text($(this).attr('is')).appendTo(that);  
    });

});

$('#floor').change(function() { 
    var val2 = $(this.val());
    var that2 = $('#wing').empty();

    $('floor', building_data).filter(function() {

        return val2 == $(this).text(); 
        }).find('wing').each(function() {
         $('<option>').text($(this).text()).appendTo(that2); 
    });





});


 });
 </script>

  Building:
  <select id='building'>
      <option value='0'>----------</option>
  </select>
 <br />
  Floor:
 <select id='floor'>
     <option value='0'>----------</option>
 </select>
 <br/>
  Wing:
  <select id='wing'>
       <option value='0'>----------</option>
   </select>

This is my XML data

<courses>
    <building title="Blair-Shannon">
        <floor is="1st Floor">
            <wing title="North">North</wing>
            <wing>South</wing>
        </floor>
        <floor is="2nd Floor">
            <wing>East</wing>
            <wing>West</wing>
        </floor>
    </building>
    <building title="Dogw开发者_如何学运维ood">
       <floor is="1st Floor">
            <wing>East</wing>
            <wing>Cupcake</wing>
       </floor>
       <floor is="2nd Floor">
            <wing>East</wing>
            <wing>West</wing>
       </floor>
       <floor is="3rd Floor">
            <wing>East</wing>
            <wing>West</wing>
       </floor>
    </building>
</courses>

$('#floor').change(function() { 
var val2 = $(this.val());

Should be:

$('#floor').change(function() { 
var val2 = $(this).val();

EDIT: To change the third field, change your floor method:

$('#floor').change(function() { 
    var bldg = $('#building');//building
    var val2 = $(this).val();//floor
    var that2 = $('#wing').empty();

    var test = $('building', building_data).filter(function() { 
        return bldg.val() == $(this).attr('title'); 
    }).find('floor').filter(function(){
        return $(this).attr('is') == val2;
    }).find('wing').each(function() {
        $('<option>').text($(this).text()).appendTo(that2); 
   });
});

And you should probably add a change event after populating the floor select since you don't have an empty option:

$('#building').change(function() { 

    var val = $(this).val(); 
    var that = $('#floor').empty(); 

    $('building', building_data).filter(function() { 
        return val == $(this).attr('title'); 
    }).find('floor').each(function() { 
        $('<option>').text($(this).attr('is')).appendTo(that);  
    });
    **$('#floor').change();**
});