通过JavaScript下拉菜单更改事件触发参数重新加载页面。

Question

我希望一个表格能够自动刷新并且预选中先前的选择。以下是我现有的HTML表格：

<form name='vehicleform'>

<select name='vehiclelist'>
  <option value=''>Select</option>
  <option value='bus'>Bus</option>
  <option value='bike'>Bike</option>
  <option value='car'>Car</option>
</select>

<input type='text' name='current'></input>

</form>

当用户第一次打开页面时，下拉框默认会在选择选项上，文本框（当前）为空。

当用户从下拉列表中选择任何选项时，页面需要重新加载，该下拉列表项应被选中，并且该下拉列表的值应该出现在文本输入框中。

我需要使用什么JavaScript函数来实现这个功能？

- Naveed

Answer 1

像这样：

<select name='soemname' id="myid" onchange="document.location.href = 'page.php?var=' + this.value">
  <option value=''>Select</option>
  <option value='bus'>Bus</option>
  <option value='bike'>Bike</option>
  <option value='car'>Car</option>
</select>

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

- Sarfraz

Answer 2

sAc的回答告诉你如何使用onchange事件来修改location.href属性。这种方法可以实现，但对于禁用JS的用户不可访问。我建议在表单的action属性中设置一个url，并在onchange事件中提交选择元素的表单。这样，即使没有JavaScript，用户仍然可以按回车键以相同的效果重新加载页面：

<?php $sel = isset($_GET['vehiclelist']) ? $_GET['vehiclelist'] : ""; ?>
<form name='vehicleform' action="thispage.php">

<select name='vehiclelist' onchange="this.parentNode.submit();">
  <option value='' >Select</option>
  <option value='bus' <?php echo $sel == "bus" ? "selected" : "";?>>Bus</option>
  <option value='bike' <?php echo $sel == "bike" ? "selected" : "";?>>Bike</option>
  <option value='car' <?php echo $sel == "car" ? "selected" : "";?>>Car</option>
</select>

<input type='text' name='current' value="<?php echo htmlspecialchars($_GET['var']); ?>"></input>

</form>

最终结果是一项功能，即使用户禁用JavaScript也可以访问。

- Andy E

---

@sAc：哈哈，我能理解 :) - Andy E

实际上，我必须单独提交此表单，以使用提交按钮（在问题中遗漏）存储文本框（当前）值到数据库中。因此，我必须在提交此表单时调用另一个脚本来将文本框值存储到数据库中。我认为在这种情况下，JavaScript 是唯一的选择？ - Naveed

@NAVEED：你可以为表单指定多个提交按钮，如果它们提供了name属性，你就可以检测到使用哪个按钮来发送表单。如果你有一个服务器端条件来捕获“真正”的提交并记录数据到数据库中。另请参阅http://articles.techrepublic.com.com/5100-10878_11-5242116.html。 - Andy E

输入值中存在HTML注入漏洞。请记得使用htmlspecialchars()函数。 - bobince

@bobince：你说得对。当我在这里写答案时，有时候不会想到这种东西，感谢你的提醒。 - Andy E