更改通过 jQuery 选择的 OPTION 时，Safari 不会更新 SELECT 的呈现答案

【问题标题】：Safari won't update rendering of SELECT when changing OPTION selected via jQuery更改通过 jQuery 选择的 OPTION 时，Safari 不会更新 SELECT 的呈现
【发布时间】：2012-02-19 21:27:13
【问题描述】：

使用 jQuery，我正在尝试更改 SELECT 元素中的选定选项以匹配另一个输入值：

$('#mySelect')
    .find('option')
        .filter(function() {
            return this.text == $('#selectedRejectReason').val(); 
        }).attr('selected', true)

当页面呈现并且这个 JS 运行时，我可以在 Safari 的网络检查器中看到它正在更新 DOM：

<select>    
    <option value="label">Select Reason</option>
<option value="Wrong Amount" selected="true">Wrong Amount</option>
<option value="Wrong Time">Wrong Time</option>
<option value="Wrong Place">Wrong Place</option>
</select>

当页面加载时，默认情况下，没有任何 OPTIONS 具有 SELECTED 属性...所以第一个项目正在显示。 jQuery 触发，DOM 被更新，所以它看起来像上面那样，但在 Safari 中，它仍然在页面上显示“SELECT REASON”。这在 Firefox 中运行良好。

任何想法为什么？看起来像一个 Safari 错误。唉，它在 iPhone 上破坏了我们的网站。

在进行一些搜索时，有些人似乎通过从 jQuery 1.6 升级到 1.7 来解决这个问题。唉，我现在没有那种奢侈。但是，如果这是解决方法，那么任何人都知道解决此问题的更改是什么？

【问题讨论】：

如果你使用 jQuery 1.6 或更高版本，你应该使用.prop 而不是.attr。
@Joseph 请回答这个问题，这样我就可以给你信用了！我不知道为什么会修复它，但确实如此。查看 DOM，标记是相同的，但使用 PROP 至少会更新视觉效果。

标签： jquery select safari

【解决方案1】：

在撰写本文时，以下功能适用于当前的 Safari、Safari Mobile、Chrome、Edge 和 Firefox。

这处理了 .prop 调用必须在 .attr 调用之前完成或整个事情被忽略的问题，以及 firefox 中的重绘问题。

    function updateSelect(selectname, value){
        $('select[name="'+selectname+'"] option').prop('selected',false);
        $('select[name="'+selectname+'"] option').removeAttr('selected');
        $('select[name="'+selectname+'"] option[value="'+value+'"]').prop('selected',true);
        $('select[name="'+selectname+'"] option[value="'+value+'"]').attr('selected','selected');
        $('select[name="'+selectname+'"]').val(value).change();
    }

这有一些额外的文字，因此它不会被标记为相同的答案，因为它也解决了另一个问题的不同问题。

【讨论】：

【解决方案2】：

从 jQuery 1.6 开始，你应该使用.prop:

$('#mySelect')
    .find('option')
    .filter(function() {
        return this.text == $('#selectedRejectReason').val(); 
    })
    .prop('selected', true);

查看 jQuery 文档：http://api.jquery.com/prop/

【讨论】：

做到了！查看文档似乎是设置与检索的问题（prop 设置）。
谢谢谢谢谢谢！只希望我在一小时前找到这个......：/
我发现不仅必须使用.prop，还不能使用之前的.attr版本。我试图同时使用这两种方法来更新 DOM 和标记，但如果 .attr 版本首先出现，则下拉菜单不会在 Safari 中更新，即使这两行都成功。 .prop 单独或 .prop 然后 .attr 工作。
单独使用 prop 对我不起作用，可能是因为我是通过它的价值来识别选项。为了让它工作，我还必须将选项的值分配给选择元素本身。
我只想指出，在 2017 年 11 月，我仍然需要执行 Alan 提到的相同解决方案。对于 Safari，您需要更新选项的 prop 和 select 本身的值。