Question

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

基于XML，第一个下拉列表中包含＆＃34; main＆＃34;元素，第二个下拉列表填充＆＃34;第一个＆＃34;基于元素和第三个下拉列表填充了＆＃34; second＆＃34;元件。但是，第三个下拉列表中没有填充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：

<select id="categoryTxtBox" name="locationTxtBox">
    <option>Select an option...</option>
</select>
<select id="subCategoryTxtBox" name="subCategoryTxtBox">
    <option>Select an option...</option>
</select>
<select id="subCategory2TxtBox" name="subCategory2TxtBox">
    <option>Select an option...</option>
</select>

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的第3块内，但我似乎无法弄清楚它为什么不起作用。任何帮助将不胜感激。

使用JQuery级联下拉列表

0 个答案: