爲jQuery的AJAX加載XML更改

我想使用AJAX將我的XML數據加載到jQuery中，以便在特定項目被選中時顯示某些值。我可以讓城市出現更改選擇器，但我無法弄清楚如何使用選擇器獲取正確的信息以便輸出和更改。現在我只需要輸出最後一個值，而不管選擇哪個項目。爲jQuery的AJAX加載XML更改

<script type="text/javascript"> 
var cityID; 
var city; 
var amt; 


$(document).ready(function() { 


$.ajax({ 
type: "GET", 
url: "data/precipData.xml", 
dataType: "xml", 
success: makeItRain 
}); 
}); 


function makeItRain(xml) { 

$(xml).find("Row").each(function(){ 

cityID = $(this).attr("id"); 
city = $(this).find("city").text(); 
amt = $(this).find("amt").text(); 

$('<option id="' + cityID + '">' + city + '</option>').appendTo('.selectCity'); 
console.log('appending'); 

$(".selectCity").change(function() { 

    $('option:selected', this).attr('id'); 
     $(".name").html(city); 
     console.log('city'); 
     $(".ammount").html(amt); 
     console.log('amt'); 
    }); 


}); 
}; 
</script>

XML例如：

<?xml version="1.0" encoding="UTF-8"?> 
<Document> 
    <!--Created with XmlGrid Free Online XML Editor (http://xmlgrid.net)--> 
    <Row id="1"> 
      <city>Albuquerque, NM</city> 
      <amt>0.69</amt> 
    </Row> 
    <Row id="2"> 
      <city>Arlington, TX</city> 
      <amt>13.78</amt> 
    </Row> 
    <Row id="3"> 
      <city>Atlanta, GA</city> 
      <amt>20.6</amt> 
    </Row> 
</Document>

來源

2013-07-08 user1855009

您能否向我們提供您的XML文件的小版本進行測試？ –

嘿，我已經添加了我的XML的簡短版本。 – user1855009

我爲你製作了一個[JSFiddle]（http://jsfiddle.net/PacmanBits/XduyF/）。我會解決一個問題。 –

一些變化。這是一個JSFiddle。首先，我將發佈整個更新後的代碼，然後我們將通過更改檢查所有更改。

$(function() 
{ 
    $(xml).find("Row").each(function() 
    { 
     cityID = $(this).attr("id"); 
     city = $(this).find("city").text(); 
     amt = $(this).find("amt").text(); 

     $('<option value="' + amt + '" id="' + cityID + '">' + city + '</option>').appendTo('.selectCity'); 
     console.log('appending'); 
    }); 

    $(".selectCity").change(function() 
    { 
     var sel = $(this).children("option:selected"); 
     city = sel.text(); 
     amt = sel.attr("value"); 
     $(".name").html(city); 
     $(".ammount").html(amt); 
    }); 
});

你會發現，我搬到了.change()聽者的的.each()功能之外。 JQuery有一個方便的功能（雖然偶爾會阻礙）將多個函數附加到相同的監聽器上。這是超級當您在一個大型項目中工作時很方便，多個貢獻者可能都希望將聽衆附加到同一個對象。然而，在這個的情況下，在循環的每次迭代中，將附加到.selectCity的新偵聽器處理程序將只剩下很多冗餘偵聽器; ，所以我們將它移動到.each()之外。
$('<option value="' + amt + '" id="' + cityID + '">' + city + '</option>').appendTo('.selectCity');

（這是最重要的一個），你聲明的變量city和amt頂部範圍。這些變量將是持久的，所以在循環結束後（例如，當用戶選擇一個選項時），它們將等於最後一組值（循環找到的最後一個值）。需要通過某種方式將與每個option標籤相關聯。幸運的是， option標記具有一個稱爲value的便利屬性。 value是少量的數據，如果顯示值不足，可以將其附加到option。現在，city和amt都是直接與option元素相關聯。
var sel = $(this).children("option:selected");

你幾乎擁有了option:selected選擇使用得當，但你忘了將其設置爲一個變量。我已將它設置爲變量sel; 您可以看到如何讓我們輕鬆訪問所選的option。
city = sel.text();amt = sel.attr("value"); $(".name").html(city);$(".ammount").html(amt);

最後，我們從option元素所需的數據，並相應設置它。

來源

2013-07-08 20:10:04

非常感謝你的解釋！ – user1855009

沒問題！希望它有幫助！ –

爲jQuery的AJAX加載XML更改

回答

相關問題