无法在我的JavaScript下拉菜单中显示XML。 为什么这不起作用？

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>

我的XML数据显示在页面上，但是当我使用下拉列表选择要选择的细节时，它不会发生任何变化。 我不知道我在做什么错。

我已经确定了我的XML标记都是正确的。

Answer 1

在您发布的代码中，当您在下拉列表中选择某些内容时，我看不到您要求它在什么地方进行更改，您希望它做什么？ 您将需要在下拉列表中添加一个更改侦听器，并告诉它更改后的处理方式，例如...

$("#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();
});

另外，作为一个旁注，请尝试重构您的代码，以便您仅进行一次ajax调用，并使用两者的输出。 看起来您为相同的数据两次调用了相同的服务，这是毫无原因的额外工作。