無法在我的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調用，並使用兩者的輸出。 看起來您為相同的數據兩次調用了相同的服務，這是毫無原因的額外工作。