<select> window not updating after change in selected attribute in <option>

Question

The sign up form I'm creating has Business and Residential option in select dropdown.

Based on the active page type, I change the default selected option.

Here's the html:

<select class="type_c" name="type_c">  // default selected is business
    <option value="Business" selected="selected">Business</option>
    <option value="Residential">Residential</option>
</select>

Here's the code I run in the footer of every page to change those values:

$(function(){

    var pageType = getPageType(); // returns either 'Business' or 'Residential'

    $('.type_c option').each(function(){
        $(this).removeAttr('selected');
    });

    $('.type_c option').each(function(){
        if($(this).html() == pageType)
            $(this).attr('selected','selected')
    });

});

The issue is that when it's on a 'Residential' page, the 'Residential' option is selected in DOM but visually, the 'Business' option is selected!

Thanks.

Answer 1

Sine this is changing the attribute after the initial value, it is technically a property, and you should use $(this).prop() instead of $(this).attr().

Also, try setting the value to true instead of selected

$(this).prop('selected',true);

Alternatively, you could also set the value of the select element:

$('.type_c').val(pageType);