当前位置：首页 > JavaScript

js实现多个表联动搜索

2026-03-01 21:49:29JavaScript

实现多个表联动搜索的方法

联动搜索通常涉及多个数据表之间的关联查询，通过JavaScript可以实现前端的数据过滤和联动效果。以下是几种常见的实现方式：

使用纯JavaScript实现

通过事件监听和数据过滤实现联动：

js实现多个表联动搜索

// 假设有三个下拉框：countrySelect, citySelect, districtSelect
const countryData = [
  {id: 1, name: '中国'},
  {id: 2, name: '美国'}
];

const cityData = [
  {id: 1, countryId: 1, name: '北京'},
  {id: 2, countryId: 1, name: '上海'},
  {id: 3, countryId: 2, name: '纽约'}
];

const districtData = [
  {id: 1, cityId: 1, name: '朝阳区'},
  {id: 2, cityId: 1, name: '海淀区'},
  {id: 3, cityId: 2, name: '浦东新区'}
];

// 初始化国家下拉框
countrySelect.innerHTML = countryData.map(c => `<option value="${c.id}">${c.name}</option>`).join('');

// 国家变化时更新城市
countrySelect.addEventListener('change', function() {
  const countryId = parseInt(this.value);
  const filteredCities = cityData.filter(city => city.countryId === countryId);

  citySelect.innerHTML = filteredCities.map(c => `<option value="${c.id}">${c.name}</option>`).join('');
  citySelect.dispatchEvent(new Event('change'));
});

// 城市变化时更新区县
citySelect.addEventListener('change', function() {
  const cityId = parseInt(this.value);
  const filteredDistricts = districtData.filter(district => district.cityId === cityId);

  districtSelect.innerHTML = filteredDistricts.map(d => `<option value="${d.id}">${d.name}</option>`).join('');
});

使用Vue.js实现联动

利用Vue的响应式特性可以更简洁地实现：

js实现多个表联动搜索

new Vue({
  el: '#app',
  data: {
    countries: [
      {id: 1, name: '中国'},
      {id: 2, name: '美国'}
    ],
    cities: [
      {id: 1, countryId: 1, name: '北京'},
      {id: 2, countryId: 1, name: '上海'},
      {id: 3, countryId: 2, name: '纽约'}
    ],
    districts: [
      {id: 1, cityId: 1, name: '朝阳区'},
      {id: 2, cityId: 1, name: '海淀区'},
      {id: 3, cityId: 2, name: '浦东新区'}
    ],
    selectedCountry: null,
    selectedCity: null
  },
  computed: {
    filteredCities() {
      return this.selectedCountry 
        ? this.cities.filter(c => c.countryId === this.selectedCountry)
        : [];
    },
    filteredDistricts() {
      return this.selectedCity
        ? this.districts.filter(d => d.cityId === this.selectedCity)
        : [];
    }
  }
});

使用React实现联动

React中可以通过状态管理实现类似效果：

function Cascader() {
  const [country, setCountry] = useState(null);
  const [city, setCity] = useState(null);

  const filteredCities = cityData.filter(c => c.countryId === country);
  const filteredDistricts = districtData.filter(d => d.cityId === city);

  return (
    <div>
      <select onChange={e => setCountry(Number(e.target.value))}>
        {countryData.map(c => <option value={c.id}>{c.name}</option>)}
      </select>

      <select onChange={e => setCity(Number(e.target.value))}>
        {filteredCities.map(c => <option value={c.id}>{c.name}</option>)}
      </select>

      <select>
        {filteredDistricts.map(d => <option value={d.id}>{d.name}</option>)}
      </select>
    </div>
  );
}

使用AJAX实现动态加载

对于大数据量，可以采用异步加载方式：

// 获取城市数据
function getCities(countryId) {
  return fetch(`/api/cities?countryId=${countryId}`)
    .then(res => res.json());
}

// 获取区县数据
function getDistricts(cityId) {
  return fetch(`/api/districts?cityId=${cityId}`)
    .then(res => res.json());
}

countrySelect.addEventListener('change', async function() {
  const cities = await getCities(this.value);
  citySelect.innerHTML = cities.map(c => `<option value="${c.id}">${c.name}</option>`).join('');
});

citySelect.addEventListener('change', async function() {
  const districts = await getDistricts(this.value);
  districtSelect.innerHTML = districts.map(d => `<option value="${d.id}">${d.name}</option>`).join('');
});