如何实现两个输入框的动态联动？

2024-07-12 13:40:10

如何根据第一个输入框动态改变第二个输入框的选项

在 Web 应用开发中，我们常常需要根据用户在表单中的选择动态更新其他表单项的内容，以提供更精准、高效的用户体验。例如，在国际机票预订平台上，用户选择出发城市后，到达城市的选项应该自动排除同属一个国家的城市，以避免无效选择。本文将以 Nuxt.js 框架和 Axios 库为例，详细介绍如何实现这一功能。

需求分析

假设我们有两个下拉列表框，分别用于选择出发城市和到达城市。当用户在第一个下拉列表框中选择一个城市后，第二个下拉列表框应该只显示数据库中不属于该城市所在国家的所有城市。

举例来说，如果用户选择了 "Budapest"（匈牙利）作为出发城市，那么第二个下拉列表框中就不应该再出现任何匈牙利的城市。

实现思路

为了实现这一功能，我们需要进行以下步骤：

获取所有城市数据： 使用 Axios 从后端 API 接口获取所有城市的信息，包括城市名称、所属国家代码等。
监听第一个下拉列表框的选择变化： 当用户在第一个下拉列表框中选择一个城市时，我们需要捕获该事件。
过滤第二个下拉列表框的选项： 根据所选出发城市的国家代码，从所有城市数据中过滤掉属于该国家的城市。
更新第二个下拉列表框的内容： 将过滤后的城市列表更新到第二个下拉列表框中。

代码示例

以下代码演示了如何在 Nuxt.js 组件中实现上述功能：

<template>
  <div>
    <div>
      <label for="departureCity">出发城市:</label>
      <select id="departureCity" v-model="selectedDepartureCity" @change="onDepartureCityChange">
        <option value="">请选择出发城市</option>
        <option v-for="city in allCities" :key="city.id" :value="city">
          {{ city.name }}
        </option>
      </select>
    </div>

    <div>
      <label for="arrivalCity">到达城市:</label>
      <select id="arrivalCity" v-model="selectedArrivalCity">
        <option value="">请选择到达城市</option>
        <option v-for="city in filteredArrivalCities" :key="city.id" :value="city">
          {{ city.name }}
        </option>
      </select>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      allCities: [], // 存储所有城市数据
      selectedDepartureCity: null, // 选中的出发城市
      selectedArrivalCity: null, // 选中的到达城市
    };
  },

  computed: {
    filteredArrivalCities() {
      // 如果没有选择出发城市，则返回所有城市
      if (!this.selectedDepartureCity) {
        return this.allCities;
      }

      // 获取出发城市的国家代码
      const departureCountryCode = this.selectedDepartureCity.countryCode;

      // 过滤掉与出发城市同属一个国家的城市
      return this.allCities.filter(city => city.countryCode !== departureCountryCode);
    },
  },

  async mounted() {
    // 在组件挂载时获取所有城市数据
    try {
      const response = await axios.get('/api/cities');
      this.allCities = response.data;
    } catch (error) {
      console.error('获取城市数据失败:', error);
    }
  },

  methods: {
    onDepartureCityChange() {
      // 当出发城市改变时，重置到达城市选择
      this.selectedArrivalCity = null;
    },
  },
};
</script>