Question

我有一个XML文件，包含我的所有数据，我需要从这个XML文件数据中填充文本字段。还有一个下拉列表，其中包含XML中可以选择的每个主要部分的名称。例如，如果有人在下拉列表中选择“M-A L”，它应该使用XML中的部分中的数据填充HTML文件中的文本字段。每个文本字段都应该与XML中的数据链接。

这是我的HTML代码：

<select id="Bname">
    <option value="">Please Select</option>
    <option value="M-A">M-A L</option>
    <option value="AP">Alain P</option>
</select>

<input type="text" id="name">
<input type="text" id="title">
<input type="text" id="line1">

这是我的jQuery代码：

<script type="text/javascript">  
$(document).ready(function()
{
  $.ajax({
    type: "GET",
    url: "signatures.xml",
    dataType: "xml",
    success: parseXml
  });  });


function parseXml(xml)
{
  $(xml).find("Signature").each(function()
  {
    $("#name").val($(this).find("Nom").text);
    $("#title").val($(this).find("PG-Ligne1").text);
    $("#line1").val($(this).find("PG-Ligne2").text);
  });

}

</script>

我的XML文件：

<?xml version="1.0" encoding="utf-8" ?>
<SignaturesNovatech>
  <Signature name="M-A L">
    <Nom>asd</Nom>
    <PG-Ligne1>Representative</PG-Ligne1>
    <PG-Ligne2>Cleaner</PG-Ligne2>
    <PG-Ligne3>3223 Metro street</PG-Ligne3>
    <PG-Ligne4>1-438-234-4453</PG-Ligne4>
    <PD-Ligne1>www.website.com</PD-Ligne1>
    <PD-Ligne2>mal@website.com</PD-Ligne2>
    <PD-Ligne3>City here</PD-Ligne3>
    <PD-Ligne4>Postal code</PD-Ligne4>
    <PD-Ligne5>Services available</PD-Ligne5>
    <PD-Ligne6>Graphic</PD-Ligne6>
  </Signature>
<Signature name="Alain P">
    <Nom>asd</Nom>
    <PG-Ligne1>Representative</PG-Ligne1>
    <PG-Ligne2>Cleaner</PG-Ligne2>
    <PG-Ligne3>3223 Metro street</PG-Ligne3>
    <PG-Ligne4>1-438-234-4453</PG-Ligne4>
    <PD-Ligne1>www.website.com</PD-Ligne1>
    <PD-Ligne2>mal@website.com</PD-Ligne2>
    <PD-Ligne3>City here</PD-Ligne3>
    <PD-Ligne4>Postal code</PD-Ligne4>
    <PD-Ligne5>Services available</PD-Ligne5>
    <PD-Ligne6>None</PD-Ligne6>
  </Signature>
</SignaturesNovatech>

我知道“onchange”下拉项目有一个缺失的部分。下拉菜单中的选项应该是文本...它应该扫描XML文件以检测那里是否有新条目。

我是XML和jQuery解析的新手。非常感谢

Answer 1

所以，这是你所追求的快速而肮脏的版本。看看这是不是你想要的。

＆＃13;

var xml = '<?xml version="1.0" encoding="utf-8" ?><SignaturesNovatech><Signature name="M-A L"><Nom>asd</Nom><PG-Ligne1>Representative</PG-Ligne1><PG-Ligne2>Cleaner</PG-Ligne2><PG-Ligne3>3223 Metro street</PG-Ligne3><PG-Ligne4>1-438-234-4453</PG-Ligne4><PD-Ligne1>www.website.com</PD-Ligne1><PD-Ligne2>mal@website.com</PD-Ligne2><PD-Ligne3>City here</PD-Ligne3><PD-Ligne4>Postal code</PD-Ligne4><PD-Ligne5>Services available</PD-Ligne5><PD-Ligne6>Graphic</PD-Ligne6></Signature><Signature name="Alain P"><Nom>asd-Alain</Nom><PG-Ligne1>Representative-2</PG-Ligne1><PG-Ligne2>Cleaner-2</PG-Ligne2><PG-Ligne3>3223 Metro street</PG-Ligne3><PG-Ligne4>1-438-234-4453</PG-Ligne4><PD-Ligne1>www.website.com</PD-Ligne1><PD-Ligne2>mal@website.com</PD-Ligne2><PD-Ligne3>City here</PD-Ligne3><PD-Ligne4>Postal code</PD-Ligne4><PD-Ligne5>Services available</PD-Ligne5><PD-Ligne6>None</PD-Ligne6></Signature></SignaturesNovatech>';

$("#Bname").on("change", parseXml);

function parseXml() {
  var filter = $(this).find(":selected").text();
  var $node = $(xml).find("Signature[name='" + filter + "']");
  $("#name").val($node.find("Nom").text());
  $("#title").val($node.find("PG-Ligne1").text());
  $("#line1").val($node.find("PG-Ligne2").text());
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="Bname">
    <option value="">Please Select</option>
    <option value="M-A">M-A L</option>
    <option value="AP">Alain P</option>
</select>

<br/><br/>
<input type="text" id="name"><br/>
<input type="text" id="title"><br/>
<input type="text" id="line1">

＆＃13;

因此，经过必要的更改后，您的代码可以look like。希望有所帮助。

使用jQuery进行XML解析并填充文本字段

1 个答案: