2

今日、ドロップダウン リストの作成に問題があります。

次のような構造のxmlファイルがあります。

<resultset>
  <row>
    <field name="iso3166_2">AF</field>
    <field name="country">AFGHANISTAN</field>
    <field name="fixed">1.000</field>
    <field name="mobile">1.300</field>
  </row>
  <row>
    <field name="iso3166_2">US</field>
    <field name="country">ALASKA</field>
    <field name="fixed">0.100</field>
    <field name="mobile">0.100</field>
  </row>
</resultset>

そして、国名を含むドロップダウンリストを作成したいと思います(これらのフィールドから取得: <field name="country">...</field>)。

さらに、このドロップダウンから国を選択した後、そのようなスパンで選択されたものと同じセットからの変数fixedとからの変数を表示したいと思います:mobilerowcountry

<span id="mobile"><!-- mobile value --></span>そして<span id="fixed"><!-- fixed value --></span>

私が達成したいことが明確であることを願っています。同様の質問からの回答で解決しようとしていました.xmlからjqueryを使用してドロップダウンボックスにデータを動的にロードしますが、うまくいきません(何か間違ったことをしていたと思います)。助けてください！

4

1 に答える 1

1

このようなものが動作するはずです:

$.ajax({
    url: 'img/test.xml',
    dataType: 'xml', // Make sure it knows to treat it as XML
    success: function(xml) {
        var rows = xml.childNodes[0].getElementsByTagName("row"),
            // This assumes your <select> has id of "countries"
            $dropdown = $("#countries");

        $(rows).each(function(index, row) {
            var fields = row.getElementsByTagName("field"),
                $option = $(document.createElement("option"));

            $(fields).each(function(index, field) {
                var name = field.getAttribute("name"),
                    // A special way to get the text contents of an XML node
                    value = $(field).contents()[0].wholeText;

                // If it's the "country" field, just stick it in the option
                if (name == "country") {
                    $option.text(value);
                } else {
                    // If it's anything else, store it as extra data
                    $option.data(name, value);
                }
            });

            $dropdown.append($option);
        });

        // Whenever you change which option is selected
        $dropdown.change(function() {
            $option = $dropdown.find(":selected");

            // Fill in the spans using the extra data you saved
            $("#fixed").text($option.data("fixed"));
            $("#mobile").text($option.data("mobile"));
        });
    }
});

要するに、AJAX を介して XML を取り込む場合は、XML として扱われていることを確認してから、他の種類のドキュメントと同じように扱うことができます (いくつか注意点があります)。明らかにこれは通常の JavaScript で実行できますが、jQuery を使用する方が簡単だと思います。

于 2012-12-06T21:29:07.520 に答える