dynamic load data from xml to drop down box with jquery

Question

I took over a small web application. I am learning JQuery so I like to rewrite the current java script with JQuery. Here is what I have 1. the xml file as following

<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>

2. I like to load to drop down box1 with the title.
3. when select the title from the box1, the drop down box2 will fill in the time that response to the title.

Thanks for any tips and helps.

Answer 1

This should get you started:

<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>

What it is doing:

I am using $(document).ready(); to wait until the page is ready. Once it is, I am loading all the data from the file courses.xml (which you would change to whatever returns your XML file). Once I get this data, I populate the courses <select> with the value of all the courses in the XML. I then bind a trigger to fire everytime the courses <select> is changed. When this happens, I find the course which was selected and loop through all its times appending them to the times <select>.

Tested and works.