Селектор jQuery для запроса XML

Я знаю, что мои значения селектора и мои переменные 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>

Источник

1 ответ

Ваша логика верна, вызов ajax (и обратный вызов) хорошо на месте. Единственная проблема в том, что наш приятель jQuery дружит только с HTML (и с нами тоже) и никогда не хотел дружить с XML, потому что xQuery никогда не заботился о HTML, когда HTML никого не было и он плакал один (Джон Резиг - настоящий супермен)

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/

Источник
Другие вопросы по тегам