html select not show selected even after set selected

Question

I have a country dropdown and I set the selected attribute to US. I can clearly see select="selected" into select OPTION having value US in firebug. But neither firefox or chrome shown US as selected. I have code for populate & selected country as follows.

var countryData = getCountryData();
var html = '<option value="">Select Country</option>'; 
$.each(countryData, function(key,value) {
    if(defaultValue == value.id)
    {
        html = html + '<option value="'+value.id+'" selected="selected">'+value.name+'</option>';
    }
    else
    {
        html = html + '<option value="'+value.id+'">'+value.name+'</option>';
    }
});
countryField.html(html);

If it is really possible for any reason to browser not shown the selected even we set the attribute selected.

UPDATE : Ok guys, As I was expecting it must be conflicted by other code. And that is the case . I am using bootstrapValidator and a special call "resetForm" which did this behavior. However one thing I did not understand why still html select in firebug shown selected attribute ? But at last I placed this code after resetForm call. Thanks to all for suggestions & help.

Rossen

Answer 1

I had this peculiar problem of multiple select not selecting the selected values. What I ended up doing is select them with JS (I have jQuery in my app, so that makes it easier) like so:

$('#select_element').find('option[selected="selected"]').each(function(){
    $(this).prop('selected', true);
});

I know this is ugly, and it should be avoided, but if nothing works, this WILL work.

Howarth

Answer 2

you dont need to set selected="selected", selected itself is sufficient

<option value="anything" selected>anything</option>

Also check, is your HTML markup is correct. You are closing the <option> with </value>. It is wrong, should be <option></option>

EDIT

If the above solution is not working, you could set it through JavaScript:

document.getElementById("idOfSelect").selectedIndex = "1";//index starts from 0

Umbrian

Hmm I am using value instead of option. that is stupid mistake, I fix it. But results seems to be same as before :(. – Rossen

@Rossen can you update the question with latest changes? – Umbrian

@Rossen check this w3schools.com/tags/tryit.asp?filename=tryhtml_option_selected It works fine. – Umbrian

I know this code should work. But it is not working which is surprise for me. So I asked if any scenarios exists when even set selected attribute not work. – Rossen

@Rossen there will be an alternative to this problem. I have updated my answer, check it. – Umbrian

Answer 3

This works for me but you can try this:

countryField.html(html).trigger('change');

Rotator

Answer 4

you don't need selected="selected" just value.id + ' selected>' + ... also it should be not lastly, check that

defaultValue == value.id

in the debugger.

Coonhound

I tried selected also before. That was also not working. – Rossen

looks like part of my comment got erased, another issue you have is <option ...> </value> it should be <option ...> </option> – Coonhound

Answer 5

I had a similar issue but in my case it was not JS, but the GET variable value of another option matched the name of an option and that didn't work.

So: https://example.com?section=instruments&instruments=0 failed. Renaming to unique names fixed it for me.

Lincolnlincolnshire