使用 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 函数来实现这一点？

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>

Answer 2

sAc's answer 告诉您如何使用 onchange 事件来修改 location.href 属性。这将起作用，但禁用 JS 的用户无法访问它。我会在表单的 action 属性中设置一个 url，并让 select 元素在 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 的用户也可以访问该功能。