使用JQuery的级联下拉列表

我尝试使用JQuery和XML级联三个下拉列表。到目前为止，我有前两个工作下拉列表工作，但我一直无法得到第三个工作

基于XML，第一个下拉列表用main元素填充，第二个下拉列表用基于第一个元素的元素填充，第三个下拉列表用第二个元素填充。但是，第三个下拉列表中没有任何XML内容

以下是XML的一个示例：

    <categories>
    <main name="Main category A">
        <first name="Sub Category A">
            <second>Sub Category B1</second>
            <second>Sub Category B2</second>
            <second>Sub Category B3</second>
            <second>Sub Category B4</second>
            <second>Sub Category B5</second>
        </first>
    </main>
    <main name="Main category B">
         <first name="Sub Category A">
            <second>Sub Category B1</second>
            <second>Sub Category B2</second>
            <second>Sub Category B3</second>
            <second>Sub Category B4</second>
            <second>Sub Category B5</second>
         </first>
    </main>   

HTML:

JQuery：

<script>
    $(document).ready(function () {
        var categories;
        $.get('category_listing.xml', function (data) {
            categories = data;
            var object = $('#categoryTxtBox');
            $('main', categories).each(function () {
                $('<option>').text($(this).attr('name')).appendTo(object);
            });
        }, 'xml');

        $('#categoryTxtBox').change(function () {
            var val = $(this).val();
            var that = $('#subCategoryTxtBox').empty();
            $('main', categories).filter(function () {
                return val == $(this).attr('name');
            }).find('first').each(function () {
                $('<option>').text($(this).attr('name')).appendTo(that);
            });
        });

        $('#subCategoryTxtBox').change(function () {
            var mainVal = $('#categoryTxtBox').val();
            var subVal = $(this).val();
            var that = $('subCategory2TxtBox').empty();
            $('main', categories).filter(function(){
                return mainVal == $(this).attr('name');
            }).find('first').filter(function(){
                return subVal == $(this).attr('name');
            }).find('second').each(function () {
                $('<option>').text($(this).text()).appendTo(that);
            });
        });
    });
</script>

---

问题出在JQuery的第三个块中，但我似乎无法找出它不起作用的原因。任何帮助都将不胜感激。

您应该使用来进行演示。你还没有说你的问题到底是什么。我将在JSFIDLE上工作。我的问题是，第三个下拉列表中没有来自XML的任何内容。这肯定只是Jquery代码的第三块不起作用。第一个块填充第一个下拉列表，第二个块填充第二个下拉列表..以此类推。我正在尝试获取代码，以根据在第二个下拉列表中选择的内容填充第三个下拉列表。

<script>
    $(document).ready(function () {
        var categories;
        $.get('category_listing.xml', function (data) {
            categories = data;
            var object = $('#categoryTxtBox');
            $('main', categories).each(function () {
                $('<option>').text($(this).attr('name')).appendTo(object);
            });
        }, 'xml');

        $('#categoryTxtBox').change(function () {
            var val = $(this).val();
            var that = $('#subCategoryTxtBox').empty();
            $('main', categories).filter(function () {
                return val == $(this).attr('name');
            }).find('first').each(function () {
                $('<option>').text($(this).attr('name')).appendTo(that);
            });
        });

        $('#subCategoryTxtBox').change(function () {
            var mainVal = $('#categoryTxtBox').val();
            var subVal = $(this).val();
            var that = $('subCategory2TxtBox').empty();
            $('main', categories).filter(function(){
                return mainVal == $(this).attr('name');
            }).find('first').filter(function(){
                return subVal == $(this).attr('name');
            }).find('second').each(function () {
                $('<option>').text($(this).text()).appendTo(that);
            });
        });
    });
</script>