使用 JQuery/AJAX 使用 XML 文件填充下拉菜单。答案

【问题标题】：Using JQuery/AJAX to populate a drop-down menu with XML file.使用 JQuery/AJAX 使用 XML 文件填充下拉菜单。
【发布时间】：2019-02-25 20:27:18
【问题描述】：

我有一个需要从 XML 文件填充的下拉菜单。这是我尝试使用的脚本：

 $(document).ready(function(){       // load jQuery 1.5
  function loadfail(){
  alert("Error: Failed to read file!");
 }

 function parse(document){
 $(document).find("menuItem").each(function(){
    var optionLabel = $(this).find('text').text();
    var optionValue = $(this).find('value').text();
    $('.opening').append(
   '<option value="'+ optionValue + '">' + optionLabel + '</option>'
    );
 });
 }

 $.ajax({
  url: 'http://ourwebserver/Online%20App/jobTitles.xml',    // name of file with our data - link has been renamed
  dataType: 'xml',    // type of file we will be reading
  success: parse,     // name of function to call when done reading file
  error: loadfail     // name of function to call when failed to read
 });
});

这是 xml 文件中的一个示例：

<menu>
<menuItem>
    <value>612</value>
    <text>CLERK-CMH HOS HIM</text>
</menuItem>
<menuItem>
    <value>1632</value>
    <text>FAM PRACT-CMH CLN Southside Medical</text>
</menuItem>

这是包含我要填充的下拉列表的 html 代码：

 <strong>Position(s) Desired</strong>
             <select name="opening" size="5" multiple="multiple" id="opening">
      </select>

我没有收到错误消息，但我也没有收到任何数据来填充菜单。

我也试过这个链接的代码/解决方案： populating a drop down menu with xml file 并且有类似的结果，没有错误，但没有数据。

提前感谢您的帮助。

【问题讨论】：

标签： jquery html xml ajax

【解决方案1】：

您使用类选择器 (.opening) 而不是 ID (#opening) 来查找 <select> 元素。在 parse 函数中使用 $('#opening') 应该可以按预期工作。

【讨论】：

如果是xml格式的txt文件可以用吗？我需要从中提取数据的报告来自另一个系统，当我们保存为 xml 时，我们得到了额外的字符。我尝试将数据类型更改为 txt，但出现 loadfail 错误。
将数据类型保留为 xml，但根据需要更改 url 参数以获取所需的文件。这行得通吗？

【解决方案2】：

我认为您在成功回调中调用了错误的函数。

success: parse,

应该是这样的。

success: function(){parse(data);},

但我可能是错的，因为我在这里没有太多经验。

【讨论】：

【解决方案3】：

检查 document 在您的解析中实际设置的内容。它可能与 HTML document 冲突。

function parse(document){
   console.log(document)
   $(document).find("menuItem").each(function(){

【讨论】：

【解决方案4】：

jQuery 文档是你最好的朋友，http://api.jquery.com/jQuery.ajax/

【讨论】：

【解决方案5】：

  <!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<title></title>
<style>
    body
    {
        width: 610px;
        font-family: calibri;
    }

    .frmDronpDown
    {
        border: 1px solid #7ddaff;
        background-color: #C8EEFD;
        margin: 2px 0px;
        padding: 40px;
        border-radius: 4px;
    }

    .demoInputBox
    {
        padding: 10px;
        border: #bdbdbd 1px solid;
        border-radius: 4px;
        background-color: #FFF;
        width: 50%;
    }

    .row
    {
        padding-bottom: 15px;
    }
</style>

<!--  <script src="jquery-3.2.1.min.js" type="text/javascript"></script>-->
<script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#divEnvironment").hide();
        $("#divService").hide();
        $("#divButton").hide();
        getDropDownValue(document.getElementById('sor-list'), '', 'sorid', 
         '');
    });

    function getEnvironment(val) {
        if (val != 0) {
            $("#divEnvironment").show();
            $("#divService").hide();
            $("#divButton").hide();
        }
        else {
            $("#divEnvironment").hide();
            $("#divService").hide();
            $("#divButton").hide();
        }
        $('#environment-list option').remove();
        $('#service-list option').remove();
        $('#service-list').append("<option class='ddindent' value='0'>Please 
       Select</option>");
        getDropDownValue(document.getElementById('environment-list'), 
       'sorid', 'envid', val);
    }

    function getService(val) {
        if (val != 0) {
            $("#divEnvironment").show();
            $("#divService").show();
            $("#divButton").hide();
        }
        else {
            $("#divService").hide();
            $("#divButton").hide();
        }
        $('#service-list option').remove();
        getDropDownValue(document.getElementById('service-list'), 'envid', 
        'servid', val);
    }

    function getSubmit(val) {
        if (val != 0) {
            $("#divButton").show();
        }
        else {
            $("#divButton").hide();
        }
    }
    function getDropDownValue(dropdown, id1, id2, val) {
        $.ajax({
            type: "GET",
            url: "make.xml",
            dataType: "xml",
            success: function (xml) {
                var selectCity = $('#' + dropdown.id);
                selectCity.append("<option class='ddindent' value='0'>Please 
            Select</option>");
                $(xml).find('dropdown').each(function () {
                    $(this).find(dropdown.name).each(function () {
                        if (val != '') {
                            if ($(this).attr(id1) == val) {
                                var value = $(this).attr(id2);
                                var label = $(this).text();
                                selectCity.append("<option class='ddindent' 
         value='" + value + "'>" + label + "</option>");
                            }
                        }
                        else {
                            var value = $(this).attr(id2);
                            var label = $(this).text();
                            selectCity.append("<option class='ddindent' 
        value='" + value + "'>" + label + "</option>");
                        }
                    });
                });
            } //sucess close
        });
    }


</script>
  </head>
 <body>
<div class="frmDronpDown">
    <div class="row">
        <label>SOR:</label><br />
        <select name="sor"
            id="sor-list" class="demoInputBox"
            onchange="getEnvironment(this.value);">
        </select>
    </div>
    <div class="row" id="divEnvironment">
        <label>Environment:</label><br />
        <select name="environment"
            id="environment-list" class="demoInputBox"
            onchange="getService(this.value);">
            <option value="">Select Enviroment</option>
        </select>
    </div>
    <div class="row" id="divService">
        <label>Service:</label><br />
        <select name="service" multiple
            id="service-list" class="demoInputBox" 
       onchange="getSubmit(this.value);">
            <option value="">Select Service</option>
        </select>
    </div>
    <div class="row" id="divButton">
        <label></label>
        <br />
        <button type="button" id="btnSubmit" style="padding: 10px; width: 
       100px;">Submit</button>
    </div>
  </div>
 </body>
 </html>      

 <dropdown>
  <sor sorid="1">sor1</sor>
  <sor sorid="2">sor2</sor>
  <environment envid="1" sorid="1">environment1</environment>
  <environment envid="2" sorid="1">environment2</environment>
  <environment envid="3" sorid="2">environment3</environment>
  <environment envid="4" sorid="2">environment4</environment>
  <service servid="11" envid="1">service11</service>
  <service servid="12" envid="1">service12</service>
  <service servid="21" envid="2">service21</service>
  <service servid="22" envid="3">service22</service>
  </dropdown>

【讨论】：

你能解释一下你的答案吗？