CODEWITHSUNDEEP
jqueryhtmlfirefox
MonOve
MonOve

Reputation: 1101

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

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.

Upvotes: 7

Views: 6524

Answers (4)

Rolando Retana
Rolando Retana

Reputation: 492

If someone has the same problem than me, I ralized that it was the JQuery version. For instance this:

var SetValue = function(dropDownElement, valueToSet){
 dropDownElement.after("<br> Set to: "+valueToSet);
 dropDownElement.find("option").removeAttr("selected");
 unitsTypeControl.find("option").filter(function() {
     return this.text === valueToSet;
 }).attr('selected', true);
}

https://codepen.io/RolandoRetana/pen/GQrByQ

Works on IE but not on Chrome, after upgrading to the latest version of jquery, it worked on both.

Upvotes: 0

Tom Pietrosanti
Tom Pietrosanti

Reputation: 4294

I've had something like this happen before. Firefox likes to save the state of the form elements, so when the page reloads it shows the selection from the last session, even if it's changed via JavaScript. Normally I have to load the page from scratch (I go to the url and hit enter, as opposed to reloading).

I'm not sure if that will help, but it has happened to me in the past.

(I created a second answer because this is completely different.)

Upvotes: 0

Tom Pietrosanti
Tom Pietrosanti

Reputation: 4294

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

Upvotes: 4

wrec
wrec

Reputation: 21

I would verify what you are returning is evaluating correctly. I made a blank HTML page with the following code. You can see that the selected option is rendered differently depending on whatever string you have "pageType" set to.

<html>

<head>
<script type="text/javascript" src="json2.min.js"> </script>
<script type="text/javascript" src="jquery-1.7.2.min.js"> </script>
<script type="text/javascript" src="jquery.cookie.js"> </script>
</head>

<script>
$(function(){

    var pageType = 'Residential'; // 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')
    });

});

</script>

<body>

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



</body>
</html>

Upvotes: 0

Related Questions