使用 ajax Get 填充表单时遇到问题

Question

我正在尝试（仍然）通过从“Project_ID”字段创建一个选择并使用它根据 XML 填充其他表单字段来使用远程 XML 填充 jQuery 移动表单。

我认为问题在于我尝试填充选择的方式，因为使用 JQuery 移动创建了一个我认为可能需要刷新的弹出窗口？

此外，当我尝试在以下行调试“对象不支持此属性或方法”时出现错误：Workplans = xml.find('Workplan');

我的脚本

$('#btnxml').click(function () {
  getXML();
});

function getXML() {
  $.ajax({
    type: "GET",
    url: "WorkplanReview.xml",
    dataType: "xml",
    success: function (xml) {

        var select = $('#Project_ID'),
            Workplans = xml.find('Workplan');

        $(xml).find(Workplan).each(function () {
            var Project_ID = $(this).find('Project_ID').text();
            select.append("<option>" + Project_ID + "</option>");
        });

        $("#Project_ID").change(function () {
            var selectedIndex = $('#Project_ID option').index($('#Project_ID option:selected')),
                Workplan = $(Workplans[selectedIndex]);

            $('#WorkplanRecordNumber').val(Workplan.find('WorkplanRecordNumber').text());
            $('#Area').val(Workplan.find('Area').text());
            $('#Station_Name').val(Workplan.find('Station_Name').text());
            $('#Station_Description').val(Workplan.find('Station_Description').text());
            $('#Station_ID').val(Workplan.find('Station_ID').text());
            $('#Latitude').val(Workplan.find('Latitude').text());
            $('#Longitude').val(Workplan.find('Longitude').text());
            $('#HUC_8_Digit').val(Workplan.find('HUC_8_Digit').text());
            $('#County').val(Workplan.find('County').text());
        }).trigger('change');

     }
  });
}

我的 HTML

<input type="button" id="btnxml" value="XML" />Workplan Number
<input type="text" name="WorkplanRecordNumber" id="WorkplanRecordNumber">Area
<input type="text" name="Area" id="Area">Project ID
<select id="Project_ID" name="Project_ID">
  <option>Loading</option>
</select>Station Name:
<input type="text" name="Station_Name" id="Station_Name">Station Description:
<input type="text" name="Station_Description" id="Station_Description">Station ID
<input type="text" name="Station_ID" id="Station_ID">
<label class="huc-label" for="HUC_8_Digit">HUC</label>
<select class="select_huc" id="HUC_8_Digit" name="HUC_8_Digit" data-iconpos="left" data-icon="grid">
  <option>Select</option>
</select>
<label class="county-label" for="County">County</label>
<select class="select_county" id="County" name="County" data-iconpos="left" data-icon="grid">
  <option>County</option>
</select>Latitude:
<input type="number" id="Latitude" name="Latitude" value="">Longitude:
<input type="number" id="Longitude" name="Longitude" value="">

我知道你们可以帮助我，我提前感谢你们！

Answer 1

jQuery 将 find 之类的方法扩展为 jQuery 对象。 xml 是一个字符串，尚未转换为 jQuery 对象。你需要做这样的事情：

$(xml).find('Workplan');

或者我建议像这样重新使用对象：

success: function(xml) {
    var $xml = $(xml);
    ...
    $xml.find('Workplan');

---

让我们看看我们还能做什么：

$(function() { // Make sure all of this is wrapped in document-ready

    var Workplans; // this isn't global, but is referenced in other methods

    $('#btnxml').click(function () {
      getXML();
    });

    // Event handlers should only ever be set up once.
    $("#Project_ID").change(function () {
       var selectedIndex = $('#Project_ID option').index($('#Project_ID option:selected')),
            Workplan = $(Workplans[selectedIndex]);

        $('#WorkplanRecordNumber').val(Workplan.find('WorkplanRecordNumber').text());
        $('#Area').val(Workplan.find('Area').text());
        $('#Station_Name').val(Workplan.find('Station_Name').text());
        $('#Station_Description').val(Workplan.find('Station_Description').text());
        $('#Station_ID').val(Workplan.find('Station_ID').text());
        $('#Latitude').val(Workplan.find('Latitude').text());
        $('#Longitude').val(Workplan.find('Longitude').text());
        $('#HUC_8_Digit').val(Workplan.find('HUC_8_Digit').text());
        $('#County').val(Workplan.find('County').text());
    });

    function getXML() {
      $.ajax({
        type: "GET",
        url: "WorkplanReview.xml",
        dataType: "xml",
        success: function (xml) {

            Workplans = $(xml).find('Workplan'); // modifies a higher scope

            Workplans.each(function () {
                var Project_ID = $(this).find('Project_ID').text();
                $("#Project_ID").append("<option>" + Project_ID + "</option>");
            });

            $("#Project_ID").trigger('change');

         }
      });
    }
});