javascript - 使用多页的选择选项标记从 mysql 中排序数据

Question

我的网站是使用 GET 方法导航的，这是 index.php 文件的骨架

<?php
 include ('header.html');
 include ('main-content.html');
 include ('footer.html');
?>

在 header.html 中包含下拉菜单(选择选项标签)以根据这样选择的城市对信息进行排序:

<select onchange="sortResult(this.value)">
        <option value="">Please select city</option>
        <option value="City 1">City 1</option>
        <option value="City 2">City 2</option>
        <option value="City 3">City 3</option>
</select>

这是标题中的 JS 函数:

<script>
function sortResult(str)
{
  if (str=="")
  {
   document.getElementById("result").innerHTML="";
   return;
  } 
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
     document.getElementById("result").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","main-content-city.php?q="+str,true);
  xmlhttp.send();
}
</script>

这是我的 main-content.html:

<div id="result">
  Content displayed here
</div>

此代码有效，但仅适用于 main-content.html 页面。如果我导航到另一个页面，比如 child-content.html，它将无法工作。我应该如何更改 JS 代码以适用于这种情况？

这是我的 child-content.html 页面:

<div id="result">
  Content displayed here
</div>

Answer 1

您需要添加一个 <div id="result">到 child-content.html 的正文

在你的 Javascript 的第 6 行你有这个

document.getElementById("result").innerHTML="";

正在寻找 ID 为“result”的元素。如果您的页面上没有其中之一，代码将不起作用