jquery - 使用jquery从xml动态加载数据到下拉框

Question

我接管了一个小型网络应用程序。我正在学习JQuery，所以我喜欢用JQuery重写当前的java脚本。这是我所拥有的1.xml文件如下

<courses>
    <course title="math">
        <time>1:00pm</time>
        <time>3:00pm</time>
    </course>
    <course title="physic">
        <time>1:00pm</time>
        <time>3:00pm</time>
    </course>
</courses>

我喜欢加载带有标题的下拉框1。

当从box1中选择标题时，下拉框2将填写响应标题的时间。

感谢您的任何提示和帮助。

Answer 1

这应该可以帮助您开始:

<script type="text/javascript">
$(document).ready(function() {
    var course_data; // variable to hold data in once it is loaded
    $.get('courses.xml', function(data) { // get the courses.xml file
        course_data = data; // save the data for future use
                            // so we don't have to call the file again
        var that = $('#courses'); // that = the courses select
        $('course', course_data).each(function() { // find courses in data
            // dynamically create a new option element
            // make its text the value of the "title" attribute in the XML
            // and append it to the courses select
            $('<option>').text($(this).attr('title')).appendTo(that);
        });
    }, 'xml'); // specify what format the request will return - XML

    $('#courses').change(function() { // bind a trigger to when the
                                      // courses select changes
        var val = $(this).val(); // hold the select's new value
        var that = $('#times').empty(); // empty the select of times
                                        // and hold a reference in 'that'
        $('course', course_data).filter(function() { // get all courses...
            return val == $(this).attr('title'); // find the one chosen
        }).find('time').each(function() { // find all the times...
            // create a new option, set its text to the time, append to
            // the times select
            $('<option>').text($(this).text()).appendTo(that);  
        });
    });
});
</script>

Courses:
<select id='courses'>
    <option value='0'>----------</option>
</select>
<br>
Times:
<select id='times'>
    <option value='0'>----------</option>
</select>

它在做什么:

我正在使用$(document).ready();等待页面准备好。一旦完成，我将从文件 courses.xml 加载所有数据。 (您可以将其更改为返回 XML 文件的任何内容)。获得此数据后，我将填充类(class) <select>具有 XML 中所有类(class)的值。然后，我绑定(bind)一个触发器，以便每次类(class) <select> 时触发。被改变了。发生这种情况时，我找到所选的类(class)并循环遍历其所有时间，将它们附加到时间 <select> 。

经过测试并有效。