Firefox浏览器下受控下拉组件触发onChange事件返回空字符串问题

问题根因 #

该问题是Firefox和Chrome对HTMLSelect元素受控绑定的类型容错机制差异导致的：Chrome在匹配select的value值和option的value值时，会自动做隐式类型转换，而Firefox要求两者类型完全一致才会匹配成功。你当前代码中的item.location_id大概率为数字类型，而渲染到DOM上的option的value属性会被自动转为字符串类型，两者类型不匹配导致Firefox无法识别到选中的option，最终返回空字符串。

解决方法 #

• 方案1：统一value类型，将select绑定的value转为字符串，和DOM属性的类型对齐
  修改select标签的value属性即可：

value={String(item.location_id)} // <-- 转为字符串和option的value类型匹配

• 方案2：通过选中索引直接取值，兼容性更强
  修改setVariantsLocations内的取值逻辑，绕过类型匹配的问题：

setVariantsLocations = (e, parentSku, childSku, item_id) => {
    const selectedVal = e.target.options[e.target.selectedIndex].value;
    console.log(selectedVal);
    // 后续业务逻辑替换为使用selectedVal即可
}

• 额外排查点：确认loc?.id不会返回undefined或null，保证所有option的value属性都是有效值，避免空值被Firefox默认识别为空字符串。

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