Question

我正在创建一个组织的Web目录，该目录使用xml数据库显示所选县内的组织。

出于测试目的，我只是将其设置为显示当前的组织名称和县，但是当我在标有//＆----起来的javascript中有一个县名时，我得到了只有那个县的组织。如何在html中为选项列表获取跨浏览器解决方案以选择县？

在完全工作版本中每个县将有多个组织，并且xml数据中的Web地址需要作为超链接输出，这就是为什么我一次提取一个子节点而不是所有子节点一气呵成。这个想法仍在进行中，产出最终会在每个组织的单独div中。

我的HTML

<form>
Select your choice of county:
<select onchange="DisplayData(this)">
  <option>---</option>
  <option>UK</option>
  <option>Hampshire</option>
  <option>Surrey</option>
  <option>Berkshire</option>
</select>
</form>

我的javascript

<script>
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",dname,false);
try {xhttp.responseType="msxml-document"} catch(err) {} // Helping IE
xhttp.send("");
return xhttp;
}


var x=loadXMLDoc("data.xml");
var xml=x.responseXML;
function DisplayData(option)
{
name="/data/record[county[contains(., 'Hampshire')]]/name";        //<---------
// name="/data/record[county[contains(., option)]]/name";          DISPLAYS ALL COUNTIES
// name="/data/record[county[contains(., $option)]]/name";         DISPLAYS ALL COUNTIES
county="/data/record[county[contains(., 'Hampshire')]]/county";    //<---------

// code for IE
if (window.ActiveXObject || xhttp.responseType=="msxml-document")
{
xml.setProperty("SelectionLanguage","XPath");
nodes1=xml.selectNodes(name);
nodes2=xml.selectNodes(county);
for (i=0;i<nodes1.length;i++)
  {
  document.write("<b>Name:</b> " + nodes1[i].childNodes[0].nodeValue);
  document.write("<br>");
  document.write("<b>County:</b> " + nodes2[i].childNodes[0].nodeValue);
  document.write("<br>");
  document.write("<br>");
  }
}

// code for Chrome, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
{
var nodes1=xml.evaluate(name, xml, null, XPathResult.ANY_TYPE, null);
var nodes2=xml.evaluate(county, xml, null, XPathResult.ANY_TYPE, null);
var result1=nodes1.iterateNext();
var result2=nodes2.iterateNext();

while (result1)
  {
  document.write("<b>Name:</b> " + result1.childNodes[0].nodeValue);
  document.write("<br>");
  document.write("<b>County:</b> " + result2.childNodes[0].nodeValue);
  document.write("<br>");
  document.write("<br>");
  result1=nodes1.iterateNext();
  result2=nodes2.iterateNext();
  }
}
}
</script>

我的测试数据文件

<?xml version="1.0" encoding="ISO-8859-1"?>
<data>
    <record>
        <name>Hampshire Organisation</name>
        <town>Basingstoke</town>
        <county>Hampshire</county>
        <tele>01234 567890</tele>
        <web>www.hampshireorg.com</web>
    </record>
    <record>
        <name>Surrey Organisation</name>
        <town>Woking</town>
        <county>Surrey</county>
        <tele>01234 567890</tele>
        <web>www.surreyorg.com</web>
    </record>
    <record>
        <name>Berkshire Organisation</name>
        <town>Reading</town>
        <county>Berkshire</county>
        <tele>01234 567890</tele>
        <web>www.berkshireorg.com</web>
    </record>
    <record>
        <name>Nationwide Organisation</name>
        <town>London</town>
        <county>UK</county>
        <tele>01234 567890</tele>
        <web>www.nationwideorg.com</web>
    </record>
</data>

Answer 1

这里的主要问题是<select onchange="DisplayData(this)">正在返回select元素，而不是选中的选项。可以像这样获取所选选项：option.selectedOptions[0]和option.selectedOptions[0].innerText可用于获取文本。

另一个严重问题是包含选项字符串的XPath查询。该字符串被解析为文字，因此它搜索“选项”，而不是选项变量中包含的数据。它应该如下所示：name="/data/record[county[contains(., " + option + ")]]/name";

假设每个数据/记录条目都是唯一的，您不需要在这些节点上使用while循环，因为您只有一个结果。我不使用XPath，但我假设您可以使用while循环来遍历childNodes，如果需要的话。

以下是没有浏览器检查的我的DisplayData版本。由于数据一起作为一个节点的子节点存在，因此我只使用一个查询。这是理想的，因为如果你需要传递记录数据，它就是自包含的。

这是一个plunker。

function DisplayData(option) {

  var selectedOption = option.selectedOptions[0].innerText;

  var xpath = '/data//record[contains(./county, "' + selectedOption + '")]';
  var result = xml.evaluate(xpath, xml.documentElement, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);

  if (result.singleNodeValue !== null && result.singleNodeValue.children.length > 0){

    var el = document.getElementById('results');
    el.innerHTML = '';

    var data = result.singleNodeValue.children;
    for (var i = 0, length = data.length; i < length; i++){
      el.innerHTML += '<li>' + data[i].textContent + '</li>';
    }

  }
}

Answer 2

我找到了问题的答案

<select onchange="DisplayData(this)">
需要更改为<select onchange="DisplayData(this.options[this.selectedIndex].value)">

这允许javascript中的option变量在更改
时工作 name="/data/record[county[contains(., 'Hampshire')]]/name";至name='/data//record[contains(./county, "' + option + '")]/name';，例如slamborne在其回答中所建议的

和它跨浏览器工作。

如何获取javascript函数以返回所选的数据库条目

2 个答案: