JQUERY Auto使用onchange来填充3个带有XML数据的html字段

问题描述

|| 我正在尝试使用jquery自动填充选择字段，并且我可以使前两个工作正常，但是第三个select语句不获取任何数据。 我真的可以使用一些提示，为此我需要做些什么。 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>

    

解决方法

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

应该：

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

编辑： 要更改第三个字段，请更改发言权方法：

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