JQUERY自動填充3使用XML數據選擇html字段使用onchange

Question

我想使用jQuery來自動填充選擇字段，我可以得到前兩個工作沒有問題，但第三個選擇語句不會得到任何數據。

我真的可以使用一些提示，我需要爲此做些什麼。

HTML和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> 

這是我的XML數據

<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="Dogwood"> 
     <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> 

Answer 1

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

應該是：

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

編輯： 要改變第三場，改變你的樓層方法d：

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

你應該填充在地板選擇，因爲你沒有一個空的選項後，可能添加更改事件：

$('#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();** 
});