通过 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的答案 告诉您如何使用 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 的用户也可以访问该功能。