如何通过下拉框选择自动传递两个参数并跳转页面

在前端开发场景中，经常需要实现用户选择下拉框选项后，自动携带两个参数跳转到目标页面的功能，比如选择商品分类后同时传递分类ID和分类名称跳转详情页。下面介绍两种常见的实现方式。

原生JavaScript实现方案

首先需要在页面中定义一个下拉框，每个选项需要同时存储两个参数，这里可以通过自定义属性来存储额外的参数值。

<select id="targetSelect">
  <option value="1" data-extra="手机">数码产品-手机</option>
  <option value="2" data-extra="笔记本">数码产品-笔记本</option>
  <option value="3" data-extra="上衣">服饰-上衣</option>
</select>

接下来绑定下拉框的change事件，在事件触发时获取两个参数并拼接跳转地址。

// 获取下拉框元素
const selectEle = document.getElementById('targetSelect');
// 绑定change事件
selectEle.addEventListener('change', function() {
  // 获取第一个参数，这里取option的value值
  const param1 = this.value;
  // 获取第二个参数，取自定义属性data-extra的值
  const param2 = this.options[this.selectedIndex].getAttribute('data-extra');
  // 如果未选择有效选项则不跳转
  if (!param1) return;
  // 拼接跳转地址，跳转至目标页面
  window.location.href = `/detail.html?id=${param1}&name=${param2}`;
});

Vue框架实现方案

如果使用Vue开发，实现逻辑会更简洁，通过v-model绑定选中的值，同时在选项数据中存储两个参数。

<template>
  <div>
    <select v-model="selectedItem" @change="handleJump">
      <option 
        v-for="item in options" 
        :key="item.id" 
        :value="item"
      >
        {{ item.category }}-{{ item.name }}
      </option>
    </select>
  </div>
</template>

export default {
  data() {
    return {
      selectedItem: null,
      options: [
        { id: 1, category: '数码产品', name: '手机' },
        { id: 2, category: '数码产品', name: '笔记本' },
        { id: 3, category: '服饰', name: '上衣' }
      ]
    }
  },
  methods: {
    handleJump() {
      // 判断是否有选中项
      if (!this.selectedItem) return;
      // 解构获取两个参数
      const { id, name } = this.selectedItem;
      // 跳转页面并传递参数
      this.$router.push({
        path: '/detail',
        query: {
          id: id,
          name: name
        }
      });
    }
  }
}

注意事项

• 参数如果包含中文或特殊字符，建议使用encodeURIComponent进行编码后再拼接，避免乱码问题。
• 如果跳转的页面是外部地址，需要确保目标地址允许接收对应的参数，同时做好参数合法性校验。
• 自定义属性命名需要符合规范，避免使用浏览器预留的属性名，防止出现兼容性问题。

以上两种方式都可以实现下拉框选择后自动传递两个参数并跳转页面的需求，开发者可以根据项目使用的技术栈选择合适的实现方案。

下拉框参数传递页面跳转JavaScript修改时间：2026-07-19 00:57:32