Question

Using jQuery, I’m trying to change the selected option in a SELECT element to match another input value:

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

When the page renders, and this JS runs, I can see it updating the DOM just fine in Safari’s web inspector:

<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>

When the page loads, by default, none of the OPTIONS have a SELECTED attribute…so the first item is showing. The jQuery fires, the DOM is updated so it looks like it does above, but in Safari, it still shows ‘SELECT REASON’ on the page. This works just fine in Firefox.

Any ideas why? Seems like a Safari bug. Alas, it’s breaking our site on an iPhone.

In doing some searching, some people seem to fix this by upgrading from jQuery 1.6 to 1.7. Alas, I don’t have that luxury at the moment. But if that is the fix, anyone know what changed that fixes this?

Answer 1

Since jQuery 1.6, you should use .prop:

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

Take a look at the jQuery docs: http://api.jquery.com/prop/