Cannot display XML in my JavaScript dropdown menu. Why is this not working?

Question

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>


<script type="text/javascript">
$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "XML/Website.xml",
        dataType: "xml",
        success: function (xml) {
            var arr = new Array();
            $(xml).find("board").each(function () {
                var option = $(this).find('brand').text();

                if ($.inArray(option, arr) > -1) {
                    // Do nothing 
                }
                else {
                    $('#dropdown').append('<option>' + option + '</option>');
                    arr.push(option);
                }



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

<form>
<select id="dropdown">
<option></option>
</select>
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"     type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "XML/Website.xml",
        dataType: "xml",
        success: function (xml) {
            $(xml).find('board').each(function () {
                var image = $(this).find('image').text();
                var name = $(this).find('name').text();
                var brand = $(this).find('size').text();
                var brand = $(this).find('camber').text();
                var price = $(this).find('price').text();
                $('#table').append('<tr><td><img width="250px" src="' + image +     '"/></td><td>' + name + '</td><td>' + brand + '</td><td>' + price + '</td></tr>');
            });
        }
    });
});

</script>

<table id="table" border="1" cellspacing="5" cellpadding="20" class="center">
  <tr><td></td><th>Name</th><th>Camber</th><th>Price</th><th>Size</th></tr>
</table>

</body>
</html>

My XML data is being displayed on the page, but when I use the drop down to select what specifics I want to be selected, It will not change anything. I do not know what I am doing wrong.

My XML tags are all correct I have made sure of it.

Answer 1

In the code you have posted, I don't see where you ask it to change anything when you select something in the drop down.What do you expect it to do? You will need to add a change listener to the drop down, and tell it what to do when it is changed, like this...

$("#dropdown").change(function() {
  //Do what you want to do when the drop down is changed.
  //You can get the text of the drop down like this...
  var selected = $("#dropdown option:selected").text();
});

Also, as a side note, try refactoring your code so you only make the ajax call once, and use the output for both. Looks like your calling the same service twice for the same data which is extra work for no reason.