如何实现跳转至另一页面并自动选中对应下拉选项？

第一步：修改首页链接，添加查询参数 #

给首页的每个跳转链接加上查询参数，用来传递需要选中的选项标识：

<a href="page2?option=1">1</a>
<a href="page2?option=2">2</a>
<a href="page2?option=3">3</a>
<a href="page2?option=4">4</a>
<a href="page2?option=5">5</a>
<a href="page2?option=6">6</a>
<a href="page2?option=7">7</a>
<a href="page2?option=8">8</a>

第二步：在page2页面添加JavaScript逻辑 #

在page2的HTML末尾（比如</body>标签之前）加入以下代码，读取URL参数并自动选中对应下拉选项：

<div class="formSelector">
  <label for="type">Choose one</label>
  <select id="formSelector">
    <option value="" selected disabled>Choose</option>
    <option value="Option-1">Option 1</option>
    <option value="Option-2">Option 2</option>
    <option value="Option-3">Option 3</option>
    <option value="Option-4">Option 4</option>
    <option value="Option-5">Option 5</option>
    <option value="Option-6">Option 6</option>
    <option value="Option-7">Option 7</option>
    <option value="Option-8">Option 8</option>
  </select>
</div>

<script>
// 解析URL中的查询参数
const urlParams = new URLSearchParams(window.location.search);
const targetOption = urlParams.get('option');

// 如果参数存在，设置对应下拉选项为选中状态
if (targetOption) {
  const selectBox = document.getElementById('formSelector');
  selectBox.value = `Option-${targetOption}`;
}
</script>

逻辑说明 #

1. 首页链接通过?option=数字的格式传递选中指令
2. page2页面利用URLSearchParams读取URL中的参数
3. 根据参数拼接出下拉选项的value值，直接赋值给下拉框，完成自动选中

内容的提问来源于stack exchange，提问作者Preflyt