如何用JavaScript自动选择HTML中<li>标签的指定尺码选项？

没问题，我来帮你实现自动选择指定尺码的JavaScript脚本！根据你给出的页面DOM结构，这里有几种靠谱的方案：

方法1：通过尺码文本精准匹配 #

如果你明确知道要选的尺码文本（比如"12"），可以直接遍历所有尺码选项，找到文本匹配的<li>并触发点击：

// 设置你要选择的目标尺码
const targetSize = "12";

// 获取所有尺码选项的li元素
const sizeItems = document.querySelectorAll('.select-box-size li');

// 遍历查找匹配项
sizeItems.forEach(item => {
  // 用trim()处理文本可能带的空格，避免匹配失败
  if (item.textContent.trim() === targetSize) {
    // 模拟用户点击，触发选择逻辑
    item.click();
    // 可选：如果网站需要给选中项加样式类，比如active，手动加上
    item.classList.add('active');
    // 找到后退出循环，不用继续遍历了
    return;
  }
});

方法2：通过currupc属性精准定位 #

如果某个尺码对应的currupc属性值是确定的（比如你提前知道12码的currupc），用属性选择器查找会更高效，也能避免文本重复的问题：

// 替换成12码对应的currupc值
const targetUPC = "0088673XXXXXXX";

// 直接通过属性选择器找到目标li
const targetItem = document.querySelector(`.select-box-size li[currupc="${targetUPC}"]`);

if (targetItem) {
  targetItem.click();
  targetItem.classList.add('active');
}

注意事项 #

• 确保脚本在DOM加载完成后运行：如果是在页面中嵌入脚本，最好把代码放在DOMContentLoaded事件里，避免找不到元素：

  document.addEventListener('DOMContentLoaded', () => {
    // 上面的代码放在这里
  });
  

• 如果click()方法没生效：有些网站会监听mousedown或者自定义事件，你可以试试触发这些事件：

  const mousedownEvent = new MouseEvent('mousedown', { bubbles: true, cancelable: true });
  targetItem.dispatchEvent(mousedownEvent);
  

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