Menu
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