заполнить форму JQuery из XML

Хорошо, здесь много чего происходит, поэтому я понял, что новая реализация будет понятнее, чем серия исправлений (я попытаюсь отметить места, где ваше понимание JavaScript может потребовать некоторой работы). Сначала демо. Теперь JavaScript:

$('#btnxml').on('click', function() {
    var select = $('#ID'),
        xml = $($.parseXML($('#XMLData').text())),
        plans = xml.find('plan');

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

    $("#ID").change(function () {
        var selectedIndex = $('#ID option').index($('#ID option:selected')),
            plan = $(plans[selectedIndex]);

        $('#planNumber').val(plan.find('planNumber').text());
        $('#Area').val(plan.find('Area').text());
        $('#Name').val(plan.find('Name').text());
        $('#Description').val(plan.find('Description').text());
        $('#Station_ID').val(plan.find('Station_ID').text());

        $('#code').val(plan.find('code').text());
        $('#County').val(plan.find('County').text());
    }).trigger('change');
});

А затем HTML

<script type='text/xml' id='XMLData'>
  <XMLReview>
    <plan>
      <planNumber>773</planNumber> 
      <Area>Upper Missouri</Area> 
      <ID>MISSOURI-NUT</ID> 
      <Name>Missouri River</Name> 
      <code>10030101</code> 
      <County>Broadwater</County> 
      <Station_ID>M09MISSR05</Station_ID> 
    </plan>
    <plan>
      <planNumber>774</planNumber> 
      <Area>Columbia</Area> 
      <ID>FLAT-STILL-TPA-2013</ID> 
      <Name>Sheppard Creek</Name> 
      <Description>- 3A</Description> 
      <code>17010210</code> 
      <County>Flathead</County> 
      <Station_ID>C09SHEPC04</Station_ID> 
    </plan>
  </XMLReview>
</script>
<form>
    <input type="button" id="btnxml" value="XML" /><br/>
    ID <select type="text" name="ID" id="ID"></select><br/>
    planNumber<input type="text" name="Name" id="planNumber"><br/>
    area<input type="text" name="Area" id="Area"><br/>
    Name:  <input type="text" name="Name" id="Name"><br/>
    Description:  <input type="text" name="Description" id="Description"><br/>
    Station ID  <input type="text" name="Station_ID" id="Station_ID"><br/>
    <label class="Code-label" for="code">HUC</label>
    <select class="select_code" id="code" name="code" data-iconpos="left" data-icon="grid">
      <option></option>
      <option>10010001</option>
      <option>10010002</option>
      <option>10020001</option>
      <option>10030101</option>
      <option>17010210</option>
    </select>
    <br/>
    <label class="county-label" for="County">County</label>
    <select class="select_county" id="County" name="County" data-iconpos="left" data-icon="grid">
     <option></option>
     <option>Beaverhead</option>
     <option>Big Horn</option>
     <option>Blaine</option>
    </select>
</form>

Во-первых, я сделал эти изменения, чтобы сделать это легче продемонстрировать в JSFiddle, но они не обязательно совпадают с вашим окончательным кодом:

• Я подделал запрос AJAX (другой ответ здесь дает вам четкое объяснение того, как правильно использовать jQuery превосходные методы помощника AJAX). При переносе этого ответа в ваш, вы можете просто предположить, что все это завернуто в $.get() который извлекает ваш XML удаленно.
• Я также привязал click обработанный в JavaScript, к $('#btnxml') (это чище, но также потому, что JSFiddle не любит атрибуты onclick, указывающие на именованные функции), это не совсем неправильно, а просто чище.

Теперь о существенных изменениях:

• Вы действительно пытаетесь сделать две вещи, заселите свой селектор $('#ID') (который изначально был <input type='text'> который является неправильным, в этом коде я обновился до <select>, а затем после того, как он заселен, вы пытаетесь связать обработчик события change. У вас были эти шаги внутри друг друга, и я отделил их обратно. Также программно изменяя <select> не запускает событие изменения автоматически, поэтому я .trigger('change') в конце.
• Также кажется, что вы пытаетесь взять дочерние узлы выбранного плана и обновить соответствующий input с тем же именем. Вы можете использовать свойство .childNodes но это будет включать TextNodes для всего пробела между узлами XML, и вместо того, чтобы пытаться отфильтровать их, я подумал, что было бы проще просто отображать их отдельно. Это может не сработать для вас, если ваш HTML и XML постоянно обновляются, но следующий момент, который я собираюсь сделать, возможно, предотвратит полностью автоматический подход.
• При выборе опции, основанной на значении, возникают некоторые проблемы. jQuery очень умный. Если у вас есть элемент <select> с набором параметров, которые не имеют атрибутов value и вы пытаетесь установить этот элемент <select> .val() строкой из одного из этих <option> внутри этого элемента, это будет делать правильная вещь. Однако, если нет элементов, которые соответствуют этому значению, то он будет молча проходить через него. В вашем XML есть код и значения окружения, которые не отображаются в вашем HTML-коде. Я добавил недостающие значения кода, чтобы показать вам, что он работает, но я не добавил их в County <select>. Если вы знаете все свои возможные коды и графство, и вы можете обновить свой HTML, это не будет проблемой, если вместо этого вы хотите добавить новые значения, когда старые значения будут только выбраны, тогда ваш код станет немного сложнее.

Одна или две вещи:

Вы указываете встроенное событие onclick:

<input type="button" id="btnxml" value="XML" onclick="getXML()" />

Почему бы не сохранить все в одном месте - поскольку вы уже используете довольно много jQuery. Просто добавьте его в блок javascript следующим образом:

<input type="button" id="btnxml" value="XML" />

а также

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

---

Не проверяя ваш код javascript/ajax, эта конструкция неверна:

function getXML(){
    $.get("XMLReview.xml", function(data) {   <<======= REMOVE
        $.ajax({
            type: "GET",
            url: "XMLReview.xml",
            dataType: "xml",
            success: function (xml) {
                var select = $('#ID');
                $(xml).find('plan').each(function () {
                    var ID = $(this).find('ID').text();
                    select.append("<option>" + ID + "</option>");
                    $("#ID").change(function () {
                        var selectedIndex = $('#ID option').index($('#ID option:selected'));
                            var newOpt = $(xml).find("values").eq(selectedIndex).find('value').each(function () {
                            var value = $(this).text();
                        }); //END $(xml).find.eq.find.each
                    }); //END #ID.change
                }); //END $(xml).find.each
                alert(data);
            } //END AJAX.success fn
        }); //END $.ajax
    }); //END $.get  <<=================================== REMOVE
}

Он должен выглядеть так:

function getXML(){
    $.ajax({
        type: "GET",
        url: "XMLReview.xml",
        dataType: "xml",
        success: function (xml) {
            var select = $('#ID');
            $(xml).find('plan').each(function () {
                var ID = $(this).find('ID').text();
                select.append("<option>" + ID + "</option>");
                $("#ID").change(function () {
                    var selectedIndex = $('#ID option').index($('#ID option:selected'));
                        var newOpt = $(xml).find("values").eq(selectedIndex).find('value').each(function () {
                        var value = $(this).text();
                    }); //END $(xml).find.eq.find.each
                }); //END #ID.change
            }); //END $(xml).find.each
            alert(data);
        } //END AJAX.success fn
    }); //END $.ajax
}

Дополнительная оболочка $.get() не нужна.

Обратите внимание, что $.ajax() и $.get() и $.post() делают то же самое. Вы используете более структурированную конструкцию $.ajax(), которая (IMHO) упрощает работу.

$.get() просто $.get() коды type="GET" и $.post() type="POST"

---

Кроме того, я не много сделал с XML-типом данных, но я сильно подозреваю, что xml - в функции успеха вашего кодового блока AJAX, в этом контексте:

success: function (xml) {
    //post ajax code here, for eg.
    alert(xml);
}

Является ли переменная, которая будет содержать все, что было ECHOed/напечатано /etc из сценария на стороне сервера? Я не верю, что это object XML...