更改通过jQuery选择的OPTION时,Safari不会更新SELECT的渲染

Question

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

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

当页面呈现时,这个JS运行,我可以看到它在Safari的Web检查器中更新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 bug.唉,它在iPhone上破坏了我们的网站.

在进行一些搜索时,有些人似乎通过从jQuery 1.6升级到1.7来解决这个问题.唉,我现在没有那么奢侈.但如果这是修复,任何人都知道改变了什么修复了这个？

Answer 1

从jQuery 1.6开始,您应该使用.prop:

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

看一下jQuery文档:http://api.jquery.com/prop/