根据下拉列表填充HTML,这两个信息都来自XML

时间:2017-12-13 15:20:00

标签: jquery html xml

这是一个学校项目,我们学生必须使用XML文件做各种事情。这是给出的XML文件:

<?xml version="1.0" encoding="UTF-8"?>
<en_iso>
<norms>
    <norm identifier="iso_13857" name="EN ISO 13857">
        <keyword>Security</keyword>
        <keyword>Engines</keyword>
        <replaces/>
    </norm>

    <norm identifier="iso_13849_1" name="EN ISO 13849-1">
        <keyword>Security</keyword>
        <keyword>Engines</keyword>
        <keyword>Controlling</keyword>
        <replaces idref="iso_13857"/>
    </norm>
</norms>

<pubs>
    <pub>
        <title>Norms for Engine Security</title>
        <filename>caise2011sgln.pdf</filename>
        <normref idref="iso_13857"/>
        <normref idref="iso_13849_1"/>
    </pub>
    <pub>
        <title>Setting up Complex Engines</title>
        <filename>coopis2012sln.pdf</filename>
        <normref idref="iso_13849_1"/>
    </pub>
</pubs>
</en_iso>

因此,这个XML包含一个元素列表和另一个元素列表,引用前一个列表。特别是ISO规范列表和引用一个或多个规范的单独出版物列表。

我们必须创建一个XSD,我们必须使用XPath并使用源XML执行一些XSLT。最后的奖金&#34;该项目的一部分将是“自己创造一个创造性的想法”。

我的想法:我想创建一个HTML文件,并使用jquery使用XML中的规范名称填充下拉列表。 然后,我想用SPAN(或类似的)填写与下拉列表中选择的规范相关的出版物的文件名。

有点像:

规范:
[EN ISO 13849-1]
文件:
caise2011sgln.pdf
coopis2012sln.pdf



规范:
[EN ISO 13857]
文件:
caise2011sgln.pdf

我试图将来自网络和来自此处的一些示例混合在一起,例如dynamic load data from xml to drop down box with jquerycreate drop down dynamically from xml但是只有填充的下拉列表 - 如果有的话 - 但从未设法拥有文件名显示在所有。我在这里不知所措。

这是当前只有下拉列表的HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        <script type="text/javascript">
         $(document).ready(function () {
             $.ajax({
                 type: "GET",
                 url: "source.xml",
                 dataType: "xml",
                 success: function (result) {
                     $(result).find("norm").each(function () {
                         $("#norms").append($("<option />").val($(this).attr("identifier")).text($(this).attr("name")));
                     });
                 }
             });
         });
        </script>

        Norm::
        <select id="norms"></select><br>
        Publications:
        <span id="publications"><!-- filenames --></span>
    </body>
</html>

非常感谢您的任何帮助

0 个答案:

没有答案