Question

我的表格目前看起来像这样：

<form>
    ID <select type="text" name="ID" id="ID"></select><br/>
    sectionNumber<input type="text" name="Name" id="sectionNumber"><br/>
    area<input type="text" name="Area" id="Area"><br/>
    Name:  <input type="text" name="Name" id="Name"><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>

使用以下Jquery我从XML文件中读取数据并填充表单。

$(function(){

    function renderData(xml,sections){
        sections.each(function () {
            var ID = $(this).find('ID').text();
            $('#ID').append("<option>" + ID + "</option>");
        });

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

            $('#sectionNumber').val(section.find('sectionNumber').text());
            $('#Area').val(section.find('Area').text());
            $('#Name').val(section.find('Name').text());

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

    $.get('test.xml').done(function (xml) {
      var $xml = $(xml);
      var sections = $xml.find('section');
      renderData(xml,sections);//  call renderdata function to render elements
     });

});

XML数据是：

<XMLReview>
  <section>
    <ID></ID>
  </section>

  <section>
  <ID>MISSOURI-NUT</ID>
    <sectionNumber>773</sectionNumber>
    <Area>Upper Missouri</Area>
    <Name>Missouri River</Name>
    <code>10030101</code>
    <County>Beaverhead</County>
  </section>

  <section>
  <ID>FLAT-STILL-TPA-2013</ID>
    <sectionNumber>774</sectionNumber>
    <Area>Columbia</Area>
    <Name>Sheppard Creek</Name>
    <code>17010210</code>
    <County>Blaine</County>
  </section>
</XMLReview>

我想做的是让Jquery创建表格标签，而不仅仅是填充数据。

所以每个＆＃39;部分＆＃39;将有一个<ID>，但标签名称可能会更改，每个标签中的数据也会不同。

有没有办法读取XML并创建表单字段，标签并在数据可用时填充它们？

由于

Answer 1

我添加了一个示例，说明如何动态创建表单字段并填充它们。

也许这很有用，您可以相应地更新此代码，以使其适合您的实施。

不确定您是否总是希望使用xml中的数据填充选择框，但您可以更改代码。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<form id="theForm"></form>
<script type="text/javascript">
    var sections;
    var selectedVal;
    var codes = [];
    var counties = [];
    var selectorCounty = "County";
    var selectorCode = "code";

    function updateFormFields() {
        selectedVal = $("#ID option:selected").val();
        resetForm();

        // Set the selected value in the select
        $("#ID").val(selectedVal);

        // Loop the sections and populate the form fields
        sections.each(function (index, value) {
            var id = $(value).find('ID');

            if (id && id.text() && id.text() === selectedVal) {

                var theForm = $("#theForm");
                var sectionNumber = $(value).find('sectionNumber');
                var area = $(value).find('Area');
                var name = $(value).find('Name');

                if (sectionNumber && sectionNumber.text()) {
                    theForm.append('<label for="sectionNumber">' + sectionNumber.selector + '</label>');
                    theForm.append('<input type="text" name="Name" id="sectionNumber" value="' + sectionNumber.text()+ '"><br/>');
                }
                if (area && area.text()) {
                    theForm.append('<label for="Area">' + area.selector + '</label>');
                    theForm.append('<input type="text" name="Area" id="Area" value="' + area.text() + '"><br/>');
                }
                if (name && name.text()) {
                    theForm.append('<label for="Name">' + name.selector + '</label>');
                    theForm.append('<input type="text" name="Name" id="Name" value="' + name.text() + '"><br/>');
                }
                if (codes.length > 0) {
                    theForm.append('<label class="Code-label" for="code">' + selectorCode + '</label>');
                    theForm.append('<select class="select_code" id="code" name="code" data-iconpos="left" data-icon="grid"/><br/>');
                    populateCodes();
                }
                if (counties.length > 0) {
                    theForm.append('<label class="county-label" for="County">' + selectorCounty + '</label>');
                    theForm.append('<select class="select_county" id="County" name="County" data-iconpos="left" data-icon="grid"/><br/>');
                    populateCounties();
                }
            }
        });
    }

    function resetForm() {

        // Remove the content from the form and add the change event.
        $("#theForm")
                .empty()
                .append('ID<select name="ID" id="ID"><option></option></select><br/>');
        $("#ID").change(updateFormFields);

        // Populate the ID select box
        sections.each(function (index, value) {
            var id = $(value).find('ID');
            if (id && id.text()) {
                $("#ID").append("<option>" + id.text() + "</option>");
            }
        });
    }

    function populateCodes() {
        var elmCode = $("#code");
        if (codes && elmCode.length > 0) {
            elmCode.append("<option></option>");
            $(codes).each(function (index, value) {
                elmCode.append("<option>" + value + "</option>");
            });
        }
    }

    function populateCounties() {
        var elmCounty = $("#County");
        if (counties && elmCounty.length > 0) {
            elmCounty.append("<option></option>");
            $(counties).each(function (index, value) {
                elmCounty.append("<option>" + value + "</option>");
            });
        }
    }

    function getCodesFromSection() {
        sections.each(function (index, value) {
            var code = $(value).find(selectorCode);
            if (code && code.text()) {
                codes.push(code.text());
            }
        });
    }

    function getCountiesFromSection() {
        sections.each(function (index, value) {
            var county = $(value).find(selectorCounty);
            if (county && county.text()) {
                counties.push(county.text());
            }
        });
    }

    // Run this at startup
    $(function(){
        function renderData(){
            getCodesFromSection();
            getCountiesFromSection();
            resetForm();
        }

        $.get('test.xml').done(function (xml) {
            sections = $(xml).find('section');
            renderData();
        });
    });
</script>
</body>
</html>

从XML值和标签创建表单

1 个答案: