基于数组的jQuery下拉选项选中功能在Safari中失效

我完全理解你遇到的这个Safari专属问题有多棘手——明明在控制台里能看到正确的选项已经被标记为选中，但点击提交按钮时却始终获取到第一个选项的值。这其实是Safari处理隐藏<select>元素以及DOM属性（property）和HTML属性（attribute）的方式和其他浏览器存在差异导致的。

问题根源 #

你之前使用的attr()方法是操作HTML属性的，而selected实际上是DOM元素的property（属于元素的内部状态）。在Safari中，尤其是对于隐藏的<select>，仅通过attr()修改selected属性并不会同步更新DOM元素的实际选中状态（比如selectedIndex），这就导致提交时浏览器仍然认为第一个选项是选中的。

解决方案：使用val()或prop()替代attr() #

最可靠的方式是直接通过<select>元素的val()方法设置选中值，这会自动同步对应的<option>的选中状态，并且在所有浏览器（包括Safari）中都能正常工作：

修改你的选中逻辑

把原来的这段代码：

// I first unselect all
$('#product_configure_variants option').removeAttr("selected");
// Then I select matching value
$('#product_configure_variants option[value="' + closest['value'] + '"]').attr("selected", "selected")

替换为：

// 直接设置select的value，自动匹配对应选项并选中
$('#product_configure_variants').val(closest['value']);
// 触发change事件（可选，但如果有依赖change事件的逻辑建议加上）
$('#product_configure_variants').trigger('change');

如果你更倾向于直接操作<option>，可以使用prop()方法（专门用于操作DOM property）：

// 取消所有选项的选中状态
$('#product_configure_variants option').prop('selected', false);
// 设置目标选项为选中
$('#product_configure_variants option[value="' + closest['value'] + '"]').prop('selected', true);
// 触发change事件
$('#product_configure_variants').trigger('change');

简化值的获取 #

另外，在点击按钮获取值时，不需要通过find('option:selected')，直接调用<select>的val()方法就能拿到选中选项的value，更简洁可靠：

$('.addToCartTest').on('click', function(e) {
    e.preventDefault();
    // 直接获取select的value即可
    var mainFormVariant = $('#product_configure_variants').val();
    alert(mainFormVariant);
})

为什么这样有效？ #

• val()方法会直接修改<select>元素的内部选中状态，包括更新selectedIndex，这在Safari中即使元素隐藏也能正确生效。
• prop()方法直接操作DOM元素的selected property，而非HTML属性，能准确反映元素的实际选中状态。

这样修改后，你的脚本应该就能在Safari中正常工作，和其他浏览器表现一致了。

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