Question

我知道我的选择器值和我的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>

Answer 1

你的逻辑是正确的，ajax调用（和回调）很好地放置到位。唯一的问题是我们的伙伴jQuery只是HTML的朋友（我们也是），并且从不想成为XML的朋友，因为当HTML没有人而且单独哭泣时，xQuery从不关注HTML（John Resig是真正的超人）< / p>

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/

用于查询XML的jQuery选择器

1 个答案:

OMGOMG没有XML查询！

好消息

示范