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

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

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

当页面呈现并运行此JS时，我可以在Safari的web inspector中看到它很好地更新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>

加载页面时，默认情况下，所有选项都没有选定的属性…因此将显示第一项。jQuery启动时，DOM会更新，看起来就像上面那样，但在Safari中，它仍然会在页面上显示“选择原因”。这在Firefox中运行得很好

你知道为什么吗？看起来像是一只狩猎虫。唉，它正在破坏我们在iPhone上的网站

---

在进行一些搜索时，有些人似乎通过从jquery1.6升级到1.7来解决这个问题。唉，我现在没有那种奢侈。但是，如果这就是修复方法，有人知道是什么改变了修复方法吗？

自jQuery 1.6以来，您应该使用.prop:

---

看看jQuery文档：

在撰写本文时，以下功能在当前的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();
    }

---

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

如果您使用的是jQuery 1.6或更高版本，您应该使用.prop而不是.attr。@Joseph请回答这个问题，这样我就可以给您评分了！我不知道为什么会这样，但确实如此。看看DOM，标记是一样的，但是使用PROP它至少会更新视觉效果。就是这样！查看文档，似乎是设置与检索道具设置的问题。谢谢谢谢！但愿我在一小时前找到这个/我发现不仅必须使用.prop，而且不能使用它之前的.attr版本。我试图同时使用这两行来更新DOM和标记，但如果先使用.attr版本，则在Safari中下拉列表不会更新，即使两行都成功。单独使用prop或.prop then.attr有效。单独使用prop对我无效，可能是因为我通过其值来识别选项。为了让它工作，我还必须将选项的值分配给select元素本身。我只想指出，在2017年11月，我仍然必须执行Alan提到的相同解决方案。对于Safari，您需要更新选项的属性和选择本身的值。

    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();
    }