Browser caching select tag state and ignoring selected="true"

Question

I'm rendering a drop down box that contains a currently selected value using selected="true".

<select id="dropDown"> 
    <option selected="true" value="1">value2</option>
    <option value="2">value3</option>
    <option value="3">value4</option>
</select>

Initially the selected value corresponds to the selected="true", but if I play around with the drop down box and then refresh the page the selected="true" is ignored and the displayed value is the last one I chose. I tried using selected="selected" with the same results. Thanks for your help.

Possible duplicate of http://stackoverflow.com/questions/2486474/preventing-firefox-from-remebering-the-input-value-on-refresh-with-meta-tag — j08691, Jan 09 '12 at 16:57

score 18 · Accepted Answer · answered Jan 09 '12 at 16:57

18

Change your select field to <select id="dropDown" autocomplete="off">

answered Jan 09 '12 at 16:57

j08691

204,283
31
260
272

My goodness! I found this issue through perfectly semantic code. Can you expand upon why this works? – Sablefoste Aug 26 '13 at 21:29

GeorgeButter · Answer 2 · 2022-10-23T06:38:13.733

For best browser support it's actually (although it seems so dumb) better to use

autocomplete="nope"

To quote MDN:

In some cases, the browser will keep suggesting autocompletion values even if the autocomplete attribute is set to off. This unexpected behavior can be quite puzzling for developers. The trick to really forcing the no-autocompletion is to assign a random string to the attribute [...] Since this random value is not a valid one, the browser will give up.

score -1 · Answer 3 · answered Jan 09 '12 at 16:49

-1

It's a binary value, not an attribute (for some reason). Use:

<option selected="selected" value="1">value2</option>

or:

<option selected value="1">value2</option>

answered Jan 09 '12 at 16:49

Diodeus - James MacFarlane

112,730
33
157
176

I tried that approach, it does not change the behavior. Thanks though. – Assaf Karmon Jan 09 '12 at 16:56
While you're right about the syntax of the selected value, he's looking to stop the page from caching the changed field value. – j08691 Jan 09 '12 at 16:58
Did you ever think that perhaps the browser is caching your last choice? – Diodeus - James MacFarlane Jan 09 '12 at 16:59
I knew it was caching it, I want to stop caching it. Maybe I should have communicated that better. BTW I didn't down-vote you. – Assaf Karmon Jan 09 '12 at 17:50
You can also accomplish this by using document.forms[0].reset() (or whatever form name you're using) – Diodeus - James MacFarlane Jan 09 '12 at 18:21

Browser caching select tag state and ignoring selected="true"

3 Answers3

Linked