如何为两个Spinner建立关联？附省-市联动场景实例

阿华AIGC实验室

2026-5-15

嘿，这个问题我太熟了！要实现省份和城市Spinner的联动，最优方案核心是「数据结构+事件监听」的组合，不管你用Android、React还是其他技术栈，思路都是通用的，下面给你一步步拆解：

最优联动方案拆解

1. 先搞定合理的数据结构

首先得把省市区数据组织成键值对映射，用省份名称作为键，对应的城市列表作为值。这种结构能让你快速根据选中的省份找到对应的城市，效率拉满。

举个例子：

后端/本地预定义数据（Java/Kotlin）：

val provinceCityMap = mapOf(
    "广东省" to listOf("广州", "深圳", "佛山"),
    "浙江省" to listOf("杭州", "宁波", "温州"),
    "四川省" to listOf("成都", "绵阳", "德阳")
)

前端（JS/React）：

const provinceCityMap = {
  '广东省': ['广州', '深圳', '佛山'],
  '浙江省': ['杭州', '宁波', '温州'],
  '四川省': ['成都', '绵阳', '德阳']
};

2. 初始化省份Spinner

把所有省份名称从映射的键中提取出来，作为第一个Spinner的数据源。比如Android里把provinceCityMap.keys转成列表给Adapter，React里用Object.keys(provinceCityMap)生成选项。

3. 核心：给省份Spinner加选中监听

这是联动的关键！给省份Spinner绑定选中事件监听器，当用户切换省份时：

获取当前选中的省份名称
从映射中取出对应的城市列表
把城市列表设置为第二个Spinner的数据源
可选：清空城市Spinner之前的选中状态，或者默认选中第一个城市

代码示例（Android Kotlin）

// 初始化省份Spinner的Adapter
val provinceAdapter = ArrayAdapter(this, android.R.layout.simple_spinner_item, provinceCityMap.keys.toList())
provinceSpinner.adapter = provinceAdapter

// 绑定选中事件
provinceSpinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
    override fun onItemSelected(parent: AdapterView<*>?, view: View?, position: Int, id: Long) {
        val selectedProvince = parent?.getItemAtPosition(position) as String
        // 取出对应城市列表，为空时给默认空列表
        val targetCities = provinceCityMap[selectedProvince] ?: emptyList()
        // 更新城市Spinner的Adapter
        val cityAdapter = ArrayAdapter(this@MainActivity, android.R.layout.simple_spinner_item, targetCities)
        citySpinner.adapter = cityAdapter
    }

    override fun onNothingSelected(parent: AdapterView<*>?) {
        // 当没有选中省份时，清空城市Spinner
        citySpinner.adapter = ArrayAdapter(this@MainActivity, android.R.layout.simple_spinner_item, emptyList())
    }
}

代码示例（React）

import { useState } from 'react';

function ProvinceCitySelector() {
  const [selectedProvince, setSelectedProvince] = useState('');
  const [cityList, setCityList] = useState([]);

  const handleProvinceChange = (e) => {
    const province = e.target.value;
    setSelectedProvince(province);
    // 更新城市列表
    setCityList(provinceCityMap[province] || []);
  };

  return (
    <div className="selector-group">
      <select value={selectedProvince} onChange={handleProvinceChange}>
        <option value="">请选择省份</option>
        {Object.keys(provinceCityMap).map(province => (
          <option key={province} value={province}>{province}</option>
        ))}
      </select>

      <select>
        <option value="">请选择城市</option>
        {cityList.map(city => (
          <option key={city} value={city}>{city}</option>
        ))}
      </select>
    </div>
  );
}