JS报错：addEventListener未定义 - 下拉选择器事件绑定失败

先修正你的元素选择错误 #

你遇到的TypeError: selectedMake.addEventListener is not a function错误，核心原因是元素选择方式错误：

• document.getElementsByTagName("option")返回的是所有<option>元素的HTMLCollection集合，不是单个可绑定事件的DOM元素，集合没有addEventListener方法。
• document.querySelectorAll('data-name[filter_make]')语法错误：属性选择器必须写成[data-name="filter_make"]，且querySelectorAll返回的是NodeList集合，同样不能直接绑定事件，要获取单个元素需用querySelector。

正确实现步骤 #

1. 正确获取目标元素

要监听品牌选择框的变化，直接获取对应的<select>元素：

const makeSelect = document.querySelector('[data-name="filter_make"]');
const modelSelect = document.querySelector('[data-name="filter_model"]');

2. 绑定change事件到select元素

change事件应该绑定在<select>元素上，而非<option>，因为是选择框的整体选项变化触发事件：

makeSelect.addEventListener('change', filterModels);

3. 实现车型筛选逻辑

先建立品牌与对应车型的映射关系，再根据选中的品牌显示/隐藏车型选项：

// 品牌-车型映射表，匹配你的选项值
const makeModelMap = {
  'make-ford': ['falcon', 'xd-xe-xf', 'xw-xy'],
  'holden': ['hk-ht-hg', 'torana-lc-lj', 'torana-lh-lx', 'vb-vc-vh-vk-vl', 'vn-vp-vr-vs', 'vt-vy-vz-vx'],
  'kawasaki': ['ninja'],
  'nissan': ['280zx'],
  'toyota': [] // Toyota暂时无对应车型，可按需调整
};

function filterModels() {
  const selectedMake = this.value;
  const modelOptions = modelSelect.querySelectorAll('option');

  // 遍历所有车型选项
  modelOptions.forEach(option => {
    // 保留默认的"Select model"选项
    if (option.value === '') {
      option.style.display = 'block';
      return;
    }

    // 根据映射表判断是否显示当前选项
    if (selectedMake === '' || makeModelMap[selectedMake]?.includes(option.value)) {
      option.style.display = 'block';
    } else {
      option.style.display = 'none';
    }
  });

  // 重置车型选择框为默认值
  modelSelect.value = '';
}

完整代码整合

// 确保DOM加载完成后执行，避免元素未找到
document.addEventListener('DOMContentLoaded', function() {
  const makeSelect = document.querySelector('[data-name="filter_make"]');
  const modelSelect = document.querySelector('[data-name="filter_model"]');

  const makeModelMap = {
    'make-ford': ['falcon', 'xd-xe-xf', 'xw-xy'],
    'holden': ['hk-ht-hg', 'torana-lc-lj', 'torana-lh-lx', 'vb-vc-vh-vk-vl', 'vn-vp-vr-vs', 'vt-vy-vz-vx'],
    'kawasaki': ['ninja'],
    'nissan': ['280zx'],
    'toyota': []
  };

  function filterModels() {
    const selectedMake = this.value;
    const modelOptions = modelSelect.querySelectorAll('option');

    modelOptions.forEach(option => {
      if (option.value === '') {
        option.style.display = 'block';
        return;
      }

      if (selectedMake === '' || makeModelMap[selectedMake]?.includes(option.value)) {
        option.style.display = 'block';
      } else {
        option.style.display = 'none';
      }
    });

    modelSelect.value = '';
  }

  makeSelect.addEventListener('change', filterModels);
});

额外注意事项 #

• 在WordPress/WooCommerce中，建议将JS代码通过wp_enqueue_script添加到主题的functions.php或自定义JS文件中，避免直接写在页面内引发冲突。
• 如果页面是AJAX动态加载的（比如商品筛选区域），需改用事件委托或确保代码在元素生成后执行。

内容的提问来源于stack exchange，提问作者Georgie McWilks