0

我正在尝试使用 AJAX 将我的 xml 数据加载到 jQuery 更改中，以在选择特定项目时显示某些值。我可以让城市提出更改选择器，但我无法弄清楚如何获得正确的信息以输出并使用选择器进行更改。现在，无论选择哪个项目，我都只输出最后一个值。

<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>
4

1 回答 1

1

一些变化。这是一个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);
    });
});

  1. 您会注意到我已将.change()侦听器移到.each()函数之外。JQuery 具有将多个函数附加到同一个侦听器的方便（尽管偶尔会阻碍）能力。当您处理一个大型项目时，这非常方便，有多个贡献者可能都希望将侦听器附加到同一个对象。但是，在这种情况下，在循环的每次迭代中附加一个新的侦听器处理程序.selectCity只会让您只剩下很多多余的侦听器；所以我们把它移到.each().

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

    （这是重要的）您声明了变量city并amt在顶部范围内。这些变量将是持久的，因此在循环结束后的任何情况下（例如，当用户选择一个选项时），它们都将等于最后设置的值（循环找到的最后一个值）。需要有某种方法将这些值中的每一个与每个option标签相关联。幸运的是，该option标签有一个方便的属性，称为value. value是可以附加到的少量数据，option以防显示值不足。现在，两者city和amt都直接与option元素相关联。

  3. var sel = $(this).children("option:selected");

    您几乎已经option:selected正确使用了选择器，但您忘记将其设置为变量。我已将其设置为变量sel；您可以看到这如何让我们轻松访问选定的option.

  4. city = sel.text(); amt = sel.attr("value"); $(".name").html(city); $(".ammount").html(amt);

    最后，我们从option元素中获取所需的数据并进行相应的设置。

于 2013-07-08T20:10:04.980 回答