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

编辑：要更改第三个字段，请更改楼层方法：

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

JQUERY使用onchange自动使用XML数据填充3个选择的html字段

1 个答案: