基于下拉列表选项加载内容的 PHP 表单

Question

参考这个例子PHP form that loads content based on dropdown option

解决方案 1，PHP

1) 索引形式

<form action="loadPage.php" method="POST" name="theForm" id="theForm">
<select form="theForm" name="selectedPage">
  <option value="page_1">Page 1</option>
  <option value="page_2">Page 2</option>
  ...
</select>
<input type="submit" value="Load page" />
</form>

2) PHP 处理程序

<?php
//loadPage.php
$requested_page = $_POST['selectedPage'];

switch($requested_page) {
  case "page_1":
    header("Location: page_1.php");
  break;
  case "page_2":
    header("Location: page_2.php");
  break;
  default :
  echo "No page was selected";
  break;
}
?>

我只想做它而不需要点击提交。我想通过单击下拉列表值来实现这一点，然后检查它是否等于 Php 文件中的值，如果是，则显示页面。

非常感谢。

Answer 1

编写html如下：

<select form="theForm" name="selectedPage" onchange="this.form.submit()">
  <option value="page_1">Page 1</option>
  <option value="page_2">Page 2</option>
</select>

这将在您选择选项时提交表单。

Answer 2

当您在下拉列表中选择一个选项时，这将导致“重定向”：

将onchange 事件添加到select 以更改当前浏览器位置。

将选择选项值更改为页面的 URL。

（然后，您可以将 PHP 标头方向放在 loadPage.php 中。不再需要。）

<select form="theForm" name="selectedPage" 

        onchange="if (this.value) window.location.href=this.value">

  <option value="page_1.php">Page 1</option>
  <option value="page_2.php">Page 2</option>
</select>

---

Jay Blanchard 在评论部分提出的问题的答案：

这可以在没有内联 JavaScript 的情况下完成吗（为了便于维护和重用能力）？

当然，这也是可能的。例如，使用 jQuery：

$('#SelectId').change(function() { 
    //alert( this.value ); // or $(this).val()
    window.location.href = 'http://' + this.value;
});

见http://api.jquery.com/change

或者你可以绑定.on('change')

$('#SelectId').on('change', function() {
    //alert( this.value ); // or $(this).val()
    window.location.href = 'http://' + this.value;
});

不用jQuery你能做到吗？

当然，这也是可能的。您可以使用document.getElementById() 选择元素并将事件处理与addEventListener 绑定。

window.onload = function() { 
    var select = document.getElementById('SelectId');
    var handler = function() {
      if(select.value) {
            window.location.href = 'http://' + select.value;
      }
    };
    select.addEventListener('change', handler, false);
};