Javascript 传递 var onclick 选择和复选框

Question

所以我的页面有两列。右栏显示结果。

结果包括所有元素。在右栏我有几个复选框。我能够根据在 中选择的选项填充复选框。

我必须单击提交才能在右列中获取数据。我不想要 AJAX。我希望使用选中的选项刷新页面，并根据该选项显示结果。我能够编写 php 部分的代码。获取在

中选择的选项的值

所以我的代码是:

<select id="theselect" onclick = "afterChange()">
    <option value="0"> Select the Department </option>
    <option value="11"> Department11 </option>
    <option value="22"> Department22 </option>
    <option value="33"> Department33 </option>
</select>


var url = location.href;
document.getElementById("mydiv").innerHTML = url;

function afterChange(){
var dept = document.getElementById("theselect").value;
  if (dept && dept!= 0) {
  var myline = url + "&dept=" + dept;
  document.getElementById("mynewdiv").innerHTML = myline;
  window.location= myline;
  }
}

<p id='mydiv'> </p> <br />
<p id='mynewdiv'> </p>

<?php 
 if(isset($_GET['dept'])) {

 $cat = $_GET['dept'];

 echo "You are now searching in $cat";

 //code to show content from database for that department

?>

我知道有一个更好的方法来做到这一点，但我不知道。到目前为止，代码第一次运行良好。我能够根据 SELECT 选项从数据库中获取结果。 但是当我更改选择时，它会再次获取整个 URL 并将 SELECT 的新值添加到 URL，这会使 PHP 感到困惑。

所以如果我的站点 URL 是: http://mysite.php?dept=22 第二次更改 SELECT 后，它变为 http://mysite.php?dept=22&dept=33

我在 SELECT 之后也有几个复选框。

我希望根据选择和复选框对结果进行排序。

我知道一定有一个简单的方法来做到这一点，但我正在努力寻找它。

请帮助我理解这个概念。非常感谢。

Answer 1

与

  var url = location.href;

您将始终获得当前网址。意味着第二次刷新 url 将是 http://mysite.php?dept=22 现在您再次添加您的部门:

var myline = url + "&dept=" + dept;

这会产生您描述的错误。 要处理此问题，您必须先去除旧参数，或者如果您只需要一个参数，请执行以下操作:

var url = location.origin + location.pathname

您可以阅读 this 而不是 location.href 以获取更多信息