I have two dropdown menu that takes data from an xml file (parse method).

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="../java/jquery_v1.7.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
$(document).ready(function() {
var course_data;  
var course_data2;    
 $.get('exercise.xml', function(data) {
    course_data = data;
    course_data2 = data;        
      var that = $('#courses'); 
        $('course', course_data).each(function() { 
          $('<option>').text($(this).attr('title')).appendTo(that);
        });

      var that = $('#chapter');     
        $('chapter', course_data2).each(function() { 
          $('<option>').text($(this).attr('title')).appendTo(that);
        });

 }, 'xml'); 

$('#courses').change(function() { 
    var val = $(this).val(); 
    var that = $('#times').empty(); 
    $('course', course_data).filter(function() { 
        return val == $(this).attr('title'); 
    })
    .find("lesson").each(function() { 

        $("#lesson").val($(this).text()); 

    });
});
});
</script>

</head>
<body>
<form id="form_1" name="form_1" method="post" action="">
<input size="90" type="text" id="lesson"/>
</form>         

<div>
<form name="form1" >
<p>chapters
<select style="width:150px" size="1" id="chapter"> 
<option selected="selected">choose a chapter...</option>
</select></p> 
<p>exercises
<select style="width:150px" id='courses'>
<option selected="selected">choose an exercise...</option>
</select>
</form>
</div> 
</body>
</html>
exercise.xml:
Code:
<courses>
<chapter title="chapter 1">
    <course title="exercise 1">
    <lesson>aaaa aaaa aaaa</lesson>
    </course>
    <course title="exercise 2">
    <lesson>bbbb bbbb bbbb</lesson>
    </course>
    <course title="exercise 3">
    <lesson>cccc cccc cccc</lesson>
    </course>
</chapter>
<chapter title="chapter 2">
    <course title="exercise 1">
    <lesson>dddd dddd dddd</lesson>
    </course>
    <course title="exercise 2">
    <lesson>eeee eeee eeee</lesson>
    </course>
    <course title="exercise 3">
    <lesson>ffff ffff ffff</lesson>
    </course>
    <course title="exercise 4">
    <lesson>gggg gggg gggg</lesson>
   </course>
</chapter>
</courses>
I want to choose "chapter 1" from the first dropdown, and show me only the first three choices in the second dropdown, "chapter 2" the next four choices, etc... Τhe content of field "lesson" are presented in the input field

Code:
**dropdown1**     **dropdown2**           **input field**
  chapter 1   -->   exercise 1             aaaa aaaa aaaa
                    exercise 2             bbbb bbbb bbbb
                    exercise 3             cccc cccc cccc

  chapter 2   -->   exercise 1             dddd dddd dddd
                    exercise 2             eeee eeee eeee
                    exercise 3             ffff ffff ffff
                    exercise 4             gggg gggg gggg
I make some changes but it doesn't work correct. Show me all the exercises together, but i want to separate by chapters. Any suggestion? Thanks in advance