Question

我有一个包含一些学生信息的xml文件。学生的成绩应加载到一个列表框中。如果我从该列表框中选择一个成绩，则该成绩的学生姓名应显示在另一个列表框中。这是我的xml文件。

<?xml version="1.0" encoding="iso-8859-1"?>
<dropdown>
    <grade id = "1" title = "1">
        <description>Grade 1</description>
    <st id = "1">Sachintha</st>
    <st id = "1">Darshana</st>
        <st monitor="true" id = "1">Patric</st>
    </grade>

   <grade id = "2" title = "2">
        <description>Grade 2</description>
    <st id = "2">Jane</st>
    <st id = "2">Rita</st>
    <st monitor="true" id = "2">Michael</st>
    </grade>

    <grade id = "3" title = "3">
        <description>Grade 3</description>
    <st id = "3">Brad</st>
    <st id = "3">Angelina</st>
    <st monitor="true" id = "3">Ariana</st>
    </grade>
</dropdown>

这是我到目前为止所做的..第二个下拉列表（监视器）没有根据第一个下拉列表（等级）的所选项目填充。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

    <script>
        $(document).ready(function(){
            $.ajax({
                type: "GET",
                url: "XmlGrade.xml",
                dataType: "xml",    
                success: function(xml) {
                    var select = $('#grade');
                    var select2 = $('#monitor');


                    $(xml).find('dropdown').each(function(){

                        $(this).find('grade').each(function(){


                            var title = $(this).attr('title');


                            var description =  $(this).find('description').text();


                            select.append("<option  value='"+ title +"'>"+description+"</option>");



                        });
                    });

                    $('#grade').change(function() {


                        select2.empty();

                        var selectedVal = $('#grade option:selected').attr('value');



                        $(xml).find('[title="'+selectedVal+'"]').each(function(){

                            $(this).children('[id]').each(function(){

                                select2.append('<option>'+ $(this).text() +'</option>');

                            })


                        })



                    });





                } 
            }); 
        }); 
    </script>
</head>
<body>
    <div id="page-wrap">
        <select id="grade">   
        </select>
        <select id="monitor">
        </select>
    </div>
</body>
</html>

加载xml文件并显示在列表框中

0 个答案: