如何使用Node.js、MongoDB与Vue.js实现动态联动下拉选择框？

整个功能可以分为三层实现：MongoDB存行政区划关联数据、Node.js写数据查询接口、Vue前端监听下拉变化触发联动，新手可以按下面的步骤一步步写：

推荐分开存两个集合，逻辑更清晰不容易出错：

• 国家集合countries，必填字段：_id（默认主键）、countryName（国家名称）
• 省份/州集合states，必填字段：_id（默认主键）、stateName（省份/州名称）、countryId（关联对应国家的_id）

如果你的行政区划数据量很小，也可以直接把省份数组内嵌到国家集合的单条文档里，后续查询逻辑会更简单。

只需要写两个基础查询接口，用Mongoose操作MongoDB的示例代码如下：

• 获取全量国家列表接口

app.get('/api/countries', async (req, res) => {
  const countryList = await Country.find({})
  res.json({ code: 200, data: countryList })
})

• 根据国家ID查询对应省份列表接口

app.get('/api/states', async (req, res) => {
  const { countryId } = req.query
  // 没有传国家ID直接返回空数组
  if(!countryId) return res.json({ code: 200, data: [] })
  const stateList = await State.find({ countryId })
  res.json({ code: 200, data: stateList })
})

核心逻辑是监听国家下拉框的选中值变化，实时拉取对应省份数据更新下拉选项，示例代码如下：

<template>
  <div class="select-group">
    <!-- 国家下拉框 -->
    <select v-model="selectedCountryId" @change="getStateList">
      <option value="">请选择国家</option>
      <option 
        v-for="item in countryList" 
        :key="item._id" 
        :value="item._id"
      >
        {{ item.countryName }}
      </option>
    </select>

    <!-- 省份/州下拉框 -->
    <select v-model="selectedStateId">
      <option value="">请选择省份/州</option>
      <option 
        v-for="item in stateList" 
        :key="item._id" 
        :value="item._id"
      >
        {{ item.stateName }}
      </option>
    </select>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const countryList = ref([])
const stateList = ref([])
const selectedCountryId = ref('')
const selectedStateId = ref('')

// 页面加载时先拉取全量国家列表
onMounted(() => {
  axios.get('/api/countries').then(res => {
    countryList.value = res.data.data
  })
})

// 国家选中值变化时拉取对应省份列表
const getStateList = () => {
  // 每次切换国家清空上一次的省份选中值和选项
  selectedStateId.value = ''
  stateList.value = []
  if(!selectedCountryId.value) return
  axios.get(`/api/states?countryId=${selectedCountryId.value}`).then(res => {
    stateList.value = res.data.data
  })
}
</script>

• 如果你的国家+省份总数据量小于1万条，可以直接页面加载时把全量数据拉到前端，国家切换时直接用filter过滤对应省份，不用每次发请求，性能更好
• 开发阶段如果前后端端口不一致，在Vue的配置文件里加代理规则即可解决跨域问题
• 上面的示例代码省略了请求错误捕获，实际使用时可以加try/catch处理接口请求失败的场景

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