jQuery在Safari中选中select最后一个未禁用option的问题

基础需求实现（通用方案） #

对于给定的Select控件：

<select>
    <option disabled>Value 1</option>
    <option disabled>Value 2</option>
    <option>Value 3</option>
</select>

要将最后一个未标记为disabled的option设置为selected状态，通用的jQuery写法是：

$('select option:not(:disabled):last').prop('selected', true);
// 触发change事件同步状态
$('select').change();

Safari浏览器的特殊问题修复 #

你的示例代码在Safari中失效，核心问题在于状态更新时序和jQuery方法与Safari DOM解析的兼容性，以下是修复后的完整代码：

修改后的JavaScript代码 #

$('button').click(function() {
    // 统一用prop操作disabled状态（替代attr，布尔属性操作更可靠）
    $('select option').prop('disabled', true);
    
    $('select option').each(function() {
        var currFormat = this.value;
        if(currFormat === '300x300' || currFormat === '400x400') {
            $(this).prop('disabled', false);
        }
    });
    
    // 1. 获取目标选项的value
    const targetValue = $('select option:not(:disabled):last').val();
    // 2. 直接设置select的value（Safari对这种方式的状态同步更稳定）
    $('select').val(targetValue);
    // 3. 显式触发change事件确保状态同步
    $('select').trigger('change');
});

对应的HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<select>
    <option>100x100</option>
    <option>200x200</option>
    <option>300x300</option>
    <option>400x400</option>
    <option>500x500</option>
</select>

<button>Select only the 300x300 and 400x400</button>

关键修复点说明 #

• 用prop替代attr操作disabled：disabled是DOM元素的布尔属性，attr操作的是HTML属性，prop直接操作DOM状态，在Safari中表现更稳定。
• 直接设置Select的value：仅设置option的selected属性，Safari可能不会同步更新控件的视觉选中状态，直接设置Select的value能强制同步状态。
• 显式触发change事件：确保依赖Select选中状态的后续逻辑能正确执行。

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