使用JS点击Costco网站Select元素无响应，求可行解决方案

核心问题分析 #

你遇到的无响应情况，大概率是因为Costco的时间间隔下拉不是原生<select>元素，而是自定义UI组件（比如React/Vue渲染的模拟下拉），普通鼠标点击模拟无法触发组件内部绑定的事件逻辑；如果是原生select，直接模拟click也不如修改value+触发change事件可靠。

针对性解决方案 #

方案1：原生<select>元素场景

如果目标元素是原生select（可通过F12元素面板确认标签为<select>），直接修改选中值并触发change事件更高效：

async function iterateTimeIntervals() {
  const selectEl = document.getElementById("Showing");
  if (!selectEl) return;

  // 遍历所有选项
  for (const option of selectEl.options) {
    // 设置当前选项为选中
    selectEl.value = option.value;
    // 触发change事件（多数网站监听这个事件而非click）
    selectEl.dispatchEvent(new Event("change", { bubbles: true, cancelable: true }));
    // 等待收据加载完成，时间根据页面加载速度调整
    await new Promise(resolve => setTimeout(resolve, 1200));
  }
}

// 执行函数
iterateTimeIntervals();

方案2：自定义下拉组件场景

如果是自定义UI下拉（比如用<div>/<span>模拟的下拉框），需要先触发下拉展开，再逐个点击选项：

async function iterateCustomDropdown() {
  // 1. 获取下拉触发按钮（根据实际页面结构调整选择器，可通过F12复制元素选择器）
  const dropdownTrigger = document.getElementById("Showing");
  if (!dropdownTrigger) return;

  for (let i = 0; ; i++) {
    // 点击展开下拉菜单
    dropdownTrigger.click();
    // 等待选项列表渲染
    await new Promise(resolve => setTimeout(resolve, 600));

    // 2. 获取所有选项元素（替换为实际的选项选择器，比如`.dropdown-item`等）
    const options = document.querySelectorAll(".time-interval-option");
    if (i >= options.length) break; // 遍历完成退出

    // 3. 点击当前选项
    options[i].click();
    // 等待收据加载
    await new Promise(resolve => setTimeout(resolve, 1500));
  }
}

// 执行函数
iterateCustomDropdown();

调试技巧 #

• 打开F12元素面板，确认下拉组件的DOM结构，找准触发按钮和选项的选择器；
• 在Elements面板的Event Listeners标签下，查看目标元素绑定的事件（比如click/mousedown/change），针对性触发完整事件序列（比如先触发mousedown再触发mouseup最后click）；
• 先在控制台手动执行单步操作（比如点击触发按钮），确认有效后再封装成循环逻辑。

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