0

したがって、xml ファイルから特定の値のセットを選択し、それを jQuery と AJAX を使用して html ファイル内のドロップダウン ボックスに出力したいと考えています。

現在のところ、ノード「stader」を持つすべてのものを出力しますが、これは現時点で実行することになっていますが、ノード「name」の下にある「stader」のセットのみを出力したいだけです。ノード「名前」には、ドロップダウンから指定された ID と一致させたい一意の ID があります。

コード全体がこれを行います - XML ファイルを見て、そこからデータを取得します。成功した場合は、すべてのノード「name」を実行し、最初のドロップダウン ボックスに出力される ID と名前を取得します。次に、選択された変更とオプションをチェックし、コードの残りの半分を実行して、2 番目の選択/ドロップダウン ボックス (ID=landskap-stader) にその特定の ID の下にあるすべての都市/stader (同じ ID を持つノード「名前」) は、選択を変更したときに最初のドロップダウン ボックスから取得されました。

このナンセンスで私が言っていることを誰かが理解してくれることを願っています。英語/文法が下手で申し訳ありませんが、よろしくお願いします。

これは HTML コードです。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery, AJAX, XML</title>
    <link rel='stylesheet' type='text/css' href='style.css'>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type='text/javascript' src='script.js'></script>
</head>
<body>
<form>
    <fieldset>
        <legend>Formul&auml;r</legend>
            V&auml;lj ditt landskap: <select id="landskap"><option>V&auml;lj landskap</option></select><br />
            Gatuadress: <input type="text" /><br />
            Postnummer: <input type="text" /><br />
            <span id="stad-namn">?</span> <select id="landskap-stader"></select>
    </fieldset>
</form>
</body>
</html>

これは私がこれまでに持っているjQuery/AJAXコードです:

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "data.xml",
        dataType: "xml",
        success: function(xml) {
            $(xml).find('namn').each(function() {
                var id = $(this).attr('id');
                var nID = id;
                var aName = $(this).attr('landname');
                $('<option id="'+id+'">'+aName+'</option>').appendTo('#landskap');
                $("#landskap").change(function() {
                    $("#landskap option:selected").each(function() {
                        var landID = $(this).attr('id');
                        $(xml).find('namn').each(function() {
                            id = $(this).attr('id');
                            var select = $('#landskap-stader');
                            //var stader = $(this).find('stader').text();
                            if(landID == id) {
                                var bName = $(this).attr('landname');
                                $("#stad-namn").html(landID+'   '+bName+': ');

                                var optionsHtml = new Array();
                                $('stader', xml).each(function() {
                                    if(nID === landID) {
                                        var stader = $(this).text();
                                        optionsHtml.push('<option id="'+id+'">'+stader+'</option>');
                                    }
                                });
                                optionsHtml = optionsHtml.join('');
                                select.append(optionsHtml);
                            }
                        });
                    });
                });
            });
        }
    });
});

そして、これが XML ファイルです (エントリがたくさんあるので、すべてを掲載するわけではありませんが、要点はわかります)。

<?xml version="1.0"?>
<sverige>
    <landskap>
        <namn id="1" landname="Blekinge">
                <stader>Karlskrona</stader>
                <stader>Karlshamn</stader>
                <stader>Ronneby</stader>
                <stader>Sölvesborg</stader>
                <stader>Olofström</stader>
        </namn>
        <namn id="2" landname="Bohuslän">
                <stader>Kungälv</stader>
                <stader>Lysekil</stader>
                <stader>Marstrand</stader>
                <stader>Strömstad</stader>
                <stader>Uddevalla</stader>
        </namn>
        <namn id="3" landname="Dalarna">
                <stader>Avesta</stader>
                <stader>Säter</stader>
                <stader>Ludvika</stader>
                <stader>Borlänge</stader>
                <stader>Falun</stader>
                <stader>Hedemora</stader>
        </namn>
        <namn id="4" landname="Dalsland">
                <stader>Åmål</stader>
                <stader>?</stader>
                <stader>?</stader>
                <stader>?</stader>
        </namn>
        <namn id="5" landname="Gotland">
                <stader>Visby</stader>
                <stader>?</stader>
                <stader>?</stader>
                <stader>?</stader>
        </namn>

- - - - - - 編集 - - - - - -

私は自分の質問に答えることができないので、私がしたことを追加して修正します。

私が変更しなければならなかった唯一のことは、からのIFでした

if(nID === 土地ID) {

に

if(nID == 土地ID) {

また、select.empty() を追加したので、ドロップダウン メニューも追加し続けず、毎回新しいオプション セットが必要です。

$('stader', this).each(function() {
    if(nID == landID) {
        var stader = $(this).text();
        optionsHtml.push('<option id="'+id+'">'+stader+'</option>');
        select.empty();
    }
});
4

1 に答える 1

0

私が変更しなければならなかった唯一のことは、からのIFでした

if(nID === 土地ID) {

に

if(nID == 土地ID) {

また、select.empty() を追加したので、ドロップダウン メニューも追加し続けず、毎回新しいオプション セットが必要です。

$('stader', this).each(function() {
    if(nID == landID) {
        var stader = $(this).text();
        optionsHtml.push('<option id="'+id+'">'+stader+'</option>');
        select.empty();
    }
});
于 2013-10-01T13:28:22.403 に答える