Question

<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文件并将数据插入我的datalist？我没有使用xml的经验，所以我不知道如何获得<mjesto>WORD</mjesto>

中的单词

我很确定问题出现在这里：

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

Answer 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>

欢迎来到这个社区，即使您没有声名鹊起，也不要记得如果您对答案感到满意，仍然可以用绿色标记这个回复。通过这种方式，我们都获得积分。感谢。

如何使用jquery从XML文件创建自定义datalist

1 个答案: