如何使用 jquery 从 XML 文件创建自定义数据列表答案

【问题标题】：How to create custom datalist from XML file using jquery如何使用 jquery 从 XML 文件创建自定义数据列表
【发布时间】：2021-05-02 04:10:39
【问题描述】：

<mjesta>
<mjesto>Zagreb</mjesto>
<mjesto>Split</mjesto>
<mjesto>Ploce</mjesto>
<mjesto>Pula</mjesto>
<mjesto>Pazin</mjesto>
<mjesto>Daruvar</mjesto>
<mjesto>Bjelovar</mjesto>
<mjesto>Slunj</mjesto>
<mjesto>Osijek</mjesto>
<mjesto>Virovitica</mjesto>
</mjesta>

我正在阅读的 XML 文件

$(document).ready(function() {
    $(function() {

        $.ajax({
            url: "location of xml...",
            type: "GET",
            dataType: "xml",
            success: function(gradovi) {

                $(gradovi).find("mjesta").each(function() {
                    $(this).find("mjesto").each(function() {
                        $red = "<option value=" + $(this) + ">"; 
                        $("#mjesta").append($red);
                    });
                });

            }
        });
    });
});

jQuery 代码

<input list="mjesta" name="mjesta">
                    <datalist id="mjesta">                      
                    </datalist>

我要插入数据的 HTML

如何读取这个 xml 文件并将数据插入到我的数据列表中？我没有使用 xml 的经验，所以我不知道如何获取 <mjesto>WORD</mjesto> 中的单词

我很确定问题出在这里：

 $red = "<option value=" + $(this) + ">";

【问题讨论】：

标签： jquery html ajax xml

【解决方案1】：

如果你的 xml 文件是并且他的名字是 test.xml 并且这个文件在下一个 html 页面的同一个文件夹中

<?xml version="1.0" encoding="utf-8"?>
<mjesta>
<mjesto>Zagreb</mjesto>
<mjesto>Split</mjesto>
<mjesto>Ploce</mjesto>
<mjesto>Pula</mjesto>
<mjesto>Pazin</mjesto>
<mjesto>Daruvar</mjesto>
<mjesto>Bjelovar</mjesto>
<mjesto>Slunj</mjesto>
<mjesto>Osijek</mjesto>
<mjesto>Virovitica</mjesto>
</mjesta>

用于填充您的 html 页面的 datalist 标记

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        $.ajax({
            type: "GET",
            url: "test.xml",
            dataType: "xml",
            success: function (xml) {
                var xmlDocument = $.parseXML(xml)
                var $xml = $(xmlDocument);
                $(xml).find('mjesto').each(function(){
                    var $mjesto = $(this).text();
                    $('<option>'+$mjesto+'</option>').appendTo('#mjesta')
                })  
             }
        });

   });
</script>
</head>
<body>
<input  type="text" name="mjesta" list="mjesta">
<datalist id="mjesta"></datalist>  
</body>
</html>

您可以使用 $get jquery 获得相同的结果，在这种情况下，html 页面中的脚本将是。同样，xml 文件和 html 页面必须在同一级别的同一文件夹中

<script type="text/javascript">
$(document).ready(function(){
       $.get('test.xml', function(xml){
            $(xml).find('mjesto').each(function(){
                var $mjesto = $(this).text();
                $('<option>'+$mjesto+'</option>').appendTo('#mjesta')
            });
        });     
   });
</script>

欢迎来到这个社区，即使您没有投票赞成或反对票所需的声誉请记住，如果您对答案感到满意，您仍然可以将此回复标记为绿色。通过这种方式，我们都可以获得积分。谢谢。

【讨论】：