提交后如何在 HTML 表单中保留下拉选择值？

提交后保留表单值

使用 HTML 表单时，通常需要在表单提交后将所选值保留在下拉元素中已提交。这确保了无缝的用户体验，因为之前选择的选项仍然处于选中状态。

实现

在 PHP 中，使用 WordPress，这可以使用 JavaScript 来检索所选值来实现来自表单的查询字符串参数。

考虑以下 HTML形式：

<form method="get" action="">
  <select name="name">
    <option value="a">a</option>
    <option value="b">b</option>
  </select>
  <select name="location">
    <option value="x">x</option>
    <option value="y">y</option>
  </select>
  <input type="submit" value="Submit" class="submit" />
</form>

JavaScript 解决方案

要在不使用 if-else 结构的情况下自动更新所选值，可以使用 JavaScript：

<script type="text/javascript">
  document.getElementById('name').value = "<?php echo $_GET['name']; ?>";
  document.getElementById('location').value = "<?php echo $_GET['location']; ?>";
</script>

此脚本从 URL 的查询字符串中检索选定的值，并将它们设置为下拉列表中的选定值

通过使用此方法，即使在提交表单并重新加载页面后，所选选项仍将保留。

以上是提交后如何在 HTML 表单中保留下拉选择值？的详细内容。更多信息请关注PHP中文网其他相关文章！