在前后端不分离或多页面项目中，常常需要通过一个页面的按钮跳转到另一个页面，并让目标页的下拉框直接选中某个选项。这种做法可以减少用户手动选择的操作，提高使用效率。下面介绍一种基于原生JavaScript和URL参数的通用实现方式。
实现思路
基本思路分为两步。第一步，在源页面点击按钮时，将需要选中的下拉框选项值作为URL查询参数附加到目标页面地址后面，然后使用location.href进行跳转。第二步，在目标页面加载完成后，从URL中解析出该参数，找到对应的<select>元素，并将其value设置为参数值，从而自动选中指定选项。
源页面按钮跳转代码
源页面中我们有一个按钮，点击后跳转到target.html并传递选中的值，例如category值为2。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>源页面</title>
</head>
<body>
<button id="jumpBtn">跳转到目标页并选中选项</button>
<script>
document.getElementById('jumpBtn').addEventListener('click', function() {
// 需要选中的下拉框值
var targetValue = '2';
// 拼接带参数的URL并跳转
window.location.href = 'target.html?category=' + encodeURIComponent(targetValue);
});
</script>
</body>
</html>
目标页面自动选中代码
目标页面在DOM加载完毕后，读取URL中的category参数，并对<select>元素进行赋值操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>目标页面</title>
</head>
<body>
<select id="categorySelect">
<option value="1">选项一</option>
<option value="2">选项二</option>
<option value="3">选项三</option>
</select>
<script>
// 页面加载完成后执行
window.addEventListener('DOMContentLoaded', function() {
// 解析URL参数
var params = new URLSearchParams(window.location.search);
var category = params.get('category');
if (category) {
var selectEl = document.getElementById('categorySelect');
// 设置下拉框选中值
selectEl.value = category;
}
});
</script>
</body>
</html>
注意事项
- 使用
encodeURIComponent()对参数进行编码，避免特殊字符破坏URL结构。 - 如果目标页下拉框是动态渲染的，需要确保在设置value之前选项已经存在，否则赋值无效。
- 当参数不存在时，下拉框会保持默认选中状态，不会报错。
小结
通过按钮跳转并自动选中目标页面下拉框的指定选项，本质就是利用URL参数做页面间通信，再用JavaScript控制<select>的value。这种方法不依赖任何框架，兼容性好，适合大多数传统多页面场景。
JavaScriptHTMLselectURL参数页面跳转修改时间：2026-07-25 12:24:22