Jquery 从XML值和标记创建表单_Jquery_Html_Xml_Forms

Jquery 从XML值和标记创建表单

jquery html xml forms

Jquery 从XML值和标记创建表单,jquery,html,xml,forms,Jquery,Html,Xml,Forms,我有一个表单，目前看起来像这样： <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">&l

我有一个表单，目前看起来像这样：

<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并创建表单字段、标签和填充它们

谢谢

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

也许这很有帮助，您可以相应地更新此代码，使其适合您的实现

不确定是否总是希望用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>

谢谢-我会尝试一下，然后回复：@Rocket这是对你问题的有用答案吗？

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

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