1

我知道我的选择器值和我的 xml 变量没有连接，但我不太清楚如何连接它们。我知道 xml 正在通过，但我需要将其链接到选择值后显示的内容。这是我所拥有的：

新代码

<script src="js/xmlDom.js"></script>

<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) {
    console.log($.xmlDOM(xml));
    $.xmlDOM(xml).find("Row").each(function () {
        cityID = $(this).attr("id");
        city = $(this).find("city").text();
        amt = $(this).find("amt").text();
        $('<option>' + city + '</option>').appendTo('.selectCity');
        console.log('appending');

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

            $('select option:selected', this).append(cityID);
            $(".name").append(city);
            console.log('city');
            $(".ammount").append(amt);
            console.log('amt');

        });
        //.change();


    });
};

</script>
</head>

<body>

<select class="selectCity">
                <option id="default">Select a city</option>

</select>
<div class="name">

</div>
<div class="ammount">

</div>
</body>

旧代码

<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>' + city + '</option>').appendTo('.selectCity');
    console.log('appending');

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

        $('select option:selected', this).append(cityID);
            $(".name").append(city);
            console.log('city');
            $(".ammount").append(amt);
            console.log('amt');

      });
      //.change();


    });
};
</script>
</head>

<body>

<select class="selectCity">
                <option id="default">Select a city</option>

</select>
<div class="name">

</div>
<div class="ammount">

</div>

4

1 回答 1

3

您的逻辑是正确的，ajax 调用（和回调）已经到位。唯一的问题是我们的好友 jQuery 只是 HTML 的朋友（我们也是），从不想成为 XML 的朋友，因为当 HTML 没有人并且独自哭泣时，xQuery 从来没有处理过 HTML（John Resig 是真正的超人）

OMGOMG 没有 XML 查询！

幸运的是，这不是一个大问题，世界各地的人道主义者已经编写了惊人的库和插件来解决这个问题，我可以告诉你的一个是：

xmlDOM这是一个 jQuery 插件，它使难以捉摸的 XML 查询梦想成真。

好消息

如果我们使用xmlDOM，您的代码将不必更改太多，以下是您的新代码：

function makeItRain(xml) {
        console.log($.xmlDOM(xml));
        $.xmlDOM(xml).find("Row").each(function () {
            cityID = $(this).attr("id");
            city = $(this).find("city").text();
            amt = $(this).find("amt").text();
            $('<option>' + city + '</option>').appendTo('.selectCity');
            console.log('appending');

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

                $('select option:selected', this).append(cityID);
                $(".name").append(city);
                console.log('city');
                $(".ammount").append(amt);
                console.log('amt');

            });
            //.change();
        });
    };

示范

http://jsfiddle.net/aTxYc/1/

于 2013-07-05T23:28:11.577 回答