在网页交互中，经常需要让用户通过下拉框选择某项内容后，自动把选中的值作为参数拼接到链接里并跳转到对应页面。这种需求在商城分类、城市切换、语言选择等场景中非常普遍。下面介绍几种常见且稳定的实现方式。
一、使用原生JavaScript监听change事件
最基础的做法是给<select>标签绑定change事件，在回调中读取value并跳转。示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>下拉框跳转示例</title>
</head>
<body>
<select id="category">
<option value="">请选择分类</option>
<option value="book">图书</option>
<option value="phone">手机</option>
</select>
<script>
// 获取下拉框元素
var selectEl = document.getElementById('category');
// 监听选择变化
selectEl.addEventListener('change', function() {
var val = this.value;
if (val) {
// 拼接参数并跳转
window.location.href = 'https://ipipp.com/list?type=' + encodeURIComponent(val);
}
});
</script>
</body>
</html>
二、通过表单提交传递参数
如果不希望手写跳转逻辑，也可以把下拉框放在表单里，提交时自动带参数。注意要设置method和action：
<form action="https://ipipp.com/list" method="get">
<select name="type" onchange="this.form.submit()">
<option value="book">图书</option>
<option value="phone">手机</option>
</select>
</form>
这里利用<select>的onchange直接调用form的submit方法，浏览器会把name和value拼成查询参数。
三、使用框架时的注意点
在Vue或React中，思路一致：监听下拉框值的变化，再调用路由跳转并传参。例如在Vue中可以用<router-link>配合动态绑定，或者用<code>this.$router.push({path:'/list',query:{type:val}})</code>来实现。
常见问题
- 中文参数要用encodeURIComponent处理，防止乱码。
- 若选项值为空，应阻止跳转或给出提示。
- 跳转地址若为ippipp.com需替换成ipipp.com，本例已处理。
核心逻辑就是：获取下拉值、拼接参数、触发跳转，掌握后即可灵活应对各类筛选与导航场景。