0

所以我想从我的 xml 文件中选择一组特定的值，并使用 jQuery 和 AJAX 将其打印到 html 文件内的下拉框中。

现在它会打印出所有具有节点“stader”的东西，这是它目前应该做的，但我只希望它打印出位于节点“name”下的“stader”集，并且节点“名称”有一个唯一的 ID，我想将其与下拉列表中给出的 ID 匹配。

整个代码执行此操作 - 它查看 XML 文件并从中获取数据，如果成功，它将遍历所有节点“名称”并获取 id 和将打印到第一个下拉框中的名称。然后它检查任何更改和选择的选项，然后运行代码的另一半，我想在第二个选择/下拉框（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 从

如果（nID ===土地ID）{

到

如果（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 从

如果（nID ===土地ID）{

到

如果（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 回答