javascript - 无法在我的 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 调用，并将输出用于两者。看起来您为相同的数据调用了两次相同的服务，这是无缘无故的额外工作。