如何遍历sunlight和water两个下拉选项并展示API最匹配植物结果

需求说明 #

需要通过*日照（sunlight）和浇水量（water）*两个下拉选择框的组合值，筛选展示对应最适配的植物结果。

现有代码问题梳理 #

当前实现存在以下可优化点：

• 下拉选项重复：遍历返回的植物列表直接填充下拉选项，同一种日照/浇水量配置会重复插入多次
• 缺少选择监听逻辑：未绑定下拉框的选中事件，无法触发筛选动作
• 参数固定无联动：接口请求参数写死，不能根据用户选中的下拉值动态获取对应植物数据

修正后完整实现代码 #

// 初始化下拉框DOM对象、全量数据存储变量
const $sunlight = $('#sunlight');
const $water = $('#water');
let allPlants = [];

// 初始化下拉框默认占位项
$sunlight.empty().append('<option selected="true" disabled>请选择日照条件</option>').prop('selectedIndex', 0);
$water.empty().append('<option selected="true" disabled>请选择浇水量</option>').prop('selectedIndex', 0);

// 请求全量植物数据
$.getJSON('https://front-br-challenges.web.app/api/v2/green-thumb/?sun=high&water=regularly&pets=false', function (data) {
  allPlants = data;
  // 提取日照、浇水量选项去重后填充下拉
  const sunOptions = [...new Set(data.map(item => item.sun))];
  const waterOptions = [...new Set(data.map(item => item.water))];
  
  sunOptions.forEach(val => {
    $sunlight.append($('<option></option>').attr('value', val).text(val));
  });
  waterOptions.forEach(val => {
    $water.append($('<option></option>').attr('value', val).text(val));
  });
});

// 筛选逻辑
function filterPlants() {
  const selectedSun = $sunlight.val();
  const selectedWater = $water.val();
  // 两个下拉都完成选择才执行筛选
  if (!selectedSun || !selectedWater) return;
  
  // 本地过滤匹配数据，也可根据需求拼接参数发起新的接口请求
  const matchedPlants = allPlants.filter(item => item.sun === selectedSun && item.water === selectedWater);
  // 此处可替换为页面列表渲染逻辑，当前仅打印结果
  console.log('匹配的植物列表：', matchedPlants);
}

// 绑定下拉选中事件触发筛选
$sunlight.on('change', filterPlants);
$water.on('change', filterPlants);

逻辑说明 #

1. 下拉选项去重：先提取所有植物的日照、浇水量配置去重后再填充下拉，避免出现重复选项
2. 事件绑定：给两个下拉框绑定选中变化事件，每次选择后判断两个下拉都有有效值时触发筛选
3. 筛选逻辑：支持两种实现，要么直接过滤已拉取的全量数据，要么动态拼接接口参数重新发起请求获取对应数据，拿到结果后渲染到页面即可

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