如何将下拉框选中变量传入Firebase Firestore的where查询条件

查询逻辑执行时机错误：你当前的Firestore查询代码是页面初始化时就直接执行的，此时selectedCityViewHomes还未被赋值（值为undefined），自然查不到匹配结果。你修改selectedCityViewHomes变量只是更新了变量值，不会自动重新触发Firestore查询请求。

你之前尝试给变量拼接单引号的操作完全不需要，Firestore的where方法第三个参数直接接收字符串变量即可，手动加引号反而会让查询内容本身包含引号，更匹配不到数据库中的值。

1. 将Firestore查询逻辑封装为独立函数，接收城市名作为入参
2. 下拉框选中事件触发时，拿到选中的城市值后主动调用查询函数
3. 建议对选中的城市文本做空格修剪，避免选项文本前后存在隐形空格导致匹配失败

// 封装房产查询逻辑
function loadHomesByCity(city) {
  db.collection('Homes')
    .where('location_city', '==', city.trim()) // trim处理隐形空格
    .get()
    .then(snapshot => {
      snapshot.docs.forEach(doc => {
        renderHome(doc);
      });
    });
}

// 下拉框选中触发函数
function getDropdownSelection(sel) {
  const selectedCity = sel.options[sel.selectedIndex].text;
  loadHomesByCity(selectedCity); // 选中后主动触发查询
}

// 可选配置：页面首次加载时，默认加载下拉框第一个选项对应的房产
window.addEventListener('load', () => {
  // 替换为你实际的下拉框元素ID
  const cityDropdown = document.getElementById('city-select-dropdown');
  if (cityDropdown) {
    loadHomesByCity(cityDropdown.options[cityDropdown.selectedIndex].text);
  }
});

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