Question

我有一个下拉菜单，我需要从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 并有类似的结果，没有错误，但没有数据。

提前感谢您的帮助。

Answer 1

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

success: parse,

应该是这样的。

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

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

Answer 2

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

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

Answer 3

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

Answer 4

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

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

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

5 个答案: