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.

score 10 · Answer 1 · answered Oct 26 '17 at 10:17

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.

Nishad K Ahamed · Answer 2 · 2014-10-22T08:06:45.210

3

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

edited Oct 22 '14 at 08:06

answered Oct 22 '14 at 06:55

Nishad K Ahamed

1,374
15
25

Hmm I am using value instead of option. that is stupid mistake, I fix it. But results seems to be same as before :(. – kuldeep.kamboj Oct 22 '14 at 07:29
@kuldeep.kamboj can you update the question with latest changes? – Nishad K Ahamed Oct 22 '14 at 07:35
@kuldeep.kamboj check this http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option_selected It works fine. – Nishad K Ahamed Oct 22 '14 at 07:41
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. – kuldeep.kamboj Oct 22 '14 at 07:48
@kuldeep.kamboj there will be an alternative to this problem. I have updated my answer, check it. – Nishad K Ahamed Oct 22 '14 at 07:56

score 2 · Answer 3 · answered Oct 22 '14 at 06:50

2

This works for me but you can try this:

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

answered Oct 22 '14 at 06:50

xatzistnr

174
1
7

score 1 · Answer 4 · answered Oct 22 '14 at 06:10

1

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

defaultValue == value.id

in the debugger.

answered Oct 22 '14 at 06:10

Andrew Luo

919
1
5
6

I tried selected also before. That was also not working. – kuldeep.kamboj Oct 22 '14 at 06:35
looks like part of my comment got erased, another issue you have is – Andrew Luo Oct 22 '14 at 07:14

score 0 · Answer 5 · answered Feb 24 '21 at 16:43

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.

html select not show selected even after set selected

5 Answers5