带有 OnChange 事件的几种形式

Question

我有一个下拉列表和一个输入字段。 我希望 URL 在下拉列表修改后立即更改。

<?php $s = $_GET["s"]; $q = $_GET["q"]; ?>
<form method="get" action="" name="formulaire" >
   <input type="text" name="q" value="<?php echo $q; ?>" />
   <select name="s" onchange="if (this.value) window.location.href=this.value">
   <option <?php if ( $s == 'opt1' ) { echo 'value="opt1" selected="selected" >opt1 '; } else { echo 'value="opt1" >opt1 '; } ?></option>
   <option <?php if ( $s == 'opt2' ) { echo 'value="opt2" selected="selected" >opt2 '; } else { echo 'value="opt2" >opt2 '; } ?></option>
   <option <?php if ( $s == 'opt3' ) { echo 'value="opt3" selected="selected" >opt3 '; } else { echo 'value="opt3" >opt3 '; } ?></option>
   </select>
</form>

就像现在一样，只有当输入字段在列表之前填写时，它才会运行。我试图用 value="?s=opt1" 替换 value="opt1"。但是当输入字段被填充时，URL是这样的?q=test&s=%3Fs%3Dopt1。

这是我期待的 URL :

如果只填充文本区域：?q=text

如果只选择下拉列表：?s=opt1

如果输入框和下拉列表都是filled/selected：?q=texte&s=opt1

这是一个例子：http://arkhana.fr/tempstack/menudyn.php

Answer 1

试试这个。使用 select onchange="loadUrl()"。假设选项 value="opt1" 像上面一样......没有“？=”等我在你的示例页面上看到 ATM。

在页面上放置以下脚本：

function loadUrl() {
  var params = [];
  var inpVal = document.getElementsByName("q")[0].value;
  if (inpVal.length) params.push("q="+inpVal);
  var selVal = document.getElementsByName("s")[0].value;
  if (selVal.length) params.push("s="+selVal);

  window.location.search = params.join("&");
 }