XML属性到多个下拉字段

Question

我有一个像这样的XML文件：

 <xml>
 <item name="NameA" city="CityA" country="countryA" />
 <item name="NameB" city="CityB" country="countryB" />
 </xml>

在html中我有三个选择：

<select class="nameclass"></select>
<select class="cityclass"></select>
<select class="countryclass"></select>

意图：

nameclass选择显示所有名称 - 选择名称时

cityclass仅显示所选名称的城市属性。

E.g。 user选择nameclass NameA，cityclass

选择仅显示CityA，countryclass = countryA。

代码：

var info;
$.get('items.xml', function(data) {
    info = data;
    var that1 = $('.nameclass');
    var that2 = $('.cityclass');
    $('item', xml).each(function() {
        $('<option>').text($(this).attr('name')).appendTo(that1);
    });
}, 'xml');

$('.nameclass').change(function() {
    var val = $(this).val();
    var that = $('.cityclass').empty();

    $('item, xml).filter(function() {
        return val == $(this).attr('name');
    }).find('item').each(function() {
        $('<option>').text($(this).attr('city')).appendTo(that);
    });
});

如何从第一个下拉列表中选择的项目中显示第二个和第三个下拉列表显示城市和国家/地区属性？我的代码的第二部分无效。