Creating dropdown list problem
Hi, I'm working on a project where I'm generating a drop down list of roller coasters that are categorized in xml by different parks. I have coded the script to loop through the xml and create an <option> set of tags each time it hits a new <photo>. After creating the drop down lists I want it to run so that when the user selects that area it'll show coaster pictures that are associated with that particular <photo> section park. I have pasted the code that I've written for the first step of generating the drop down list. I'm also pasting the existing html and xml files. I didn't include the photos because of any uploading size issues. Instead I put an alert tag in to show that the program is running through the loop of grabbing each xml photo text value.
I tested it and change it several times and I either get an syntax error in one of the closing blocks '});' or it runs syntax free and doesn't pull the text values from the xml. Is there anyone who can help me with this? I'm real new to jquery and still pretty new to javascript as well. When I look at similar examples it uses more complex code and seems like it doesn't use drop down or <ul> lists like in my coding. I prefer to keep to these two types of tags since it's already coded up in a html file
-------------
html
<!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" xml:lang="en" lang="en">
<head>
<title>Coasters</title>
<script src="Library/jquery.js" type="text/javascript"></script>
<script src="Library/coasters.js" type="text/javascript"></script>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<p><select id="photoType"></select></p>
<p><ul id="photoType"></ul></p>
</body>
</html>
-----------
xml
-----------
<?xml version="1.0" encoding="ISO-8859-1"?>
<photo_album>
<photo class="sixFlags">
<listing>Pics/sf/coast1.jpg</listing>
<listing>Pics/sf/coast2.jpg</listing>
</photo>
<photo class="cedarPt">
<listing>Pics/cp/coast3.jpg</listing>
<listing>Pics/cp/coast4.jpg</listing>
</photo>
</photo_album>
-----------
jquery
-------------
$(function()
{
var $coaster = $(".photo");
var $photo = $("#photoType");
$cboType.bind(function()
{
$.get("data/photo_album.xml", function(xmlData)
{
$(xmlData).get("photo[class='" + $picType.val() + "']".bind("photo").each(function()
{
$coaster.append("<option>" + $(this).text() + "</option>");
alert("photo drop down list is working")
});
});
});
$coaster.trigger("bind");
});
Thanks