Member Avatar for nathanpacker

Hey, I'm trying to use a simple select menu, and I would like to set one of the values to be the default, and it works great in IE, but not in firefox. Here is a sample:

<select name="test">
<option value="Test 1">Test 1</option>
<option value="Test 2">Test 2</option>
<option value="Test 3" selected>Test 3</option>
</select>

Notice that I am trying to get "Test 3" to show up as the default option. It works fine in IE, but how do I get it to work in Firefox too?

  • 9 Contributors
  • 15 Replies
  • 731 Views
  • 6 Years Discussion Span
  • Latest Post Latest Post by homez

Dani AI

Generated

Two different things were being conflated in the thread: how the page is parsed/served, and the browser choosing to restore form state. touched on the doctype/MIME side and discovered that Firefox will re‑populate a form control on reload, so a markup-only change may not be the whole answer. For a robust, cross‑browser result you can set your server-side default and add a small client-side fallback that runs after the browser might have already restored values.

<script>
window.addEventListener('pageshow', function (e) {
  // skip overriding when the page was restored from bfcache (user returned via back/forward)
  if (e && e.persisted) return;
  var sel = document.querySelector('select[name="test"]');
  if (!sel) return;
  // set the option by its value (make sure it matches an option value)
  sel.value = 'Test 3';
  // alternatively: sel.selectedIndex = 2;  // numeric index (0-based)
});
</script>

Use the pageshow event rather than DOMContentLoaded because some browsers restore form state after the initial load; pageshow fires when the document is actually presented and the restored values are in place. If you want to preserve users' choices when they navigate back, skip overriding when the event's persisted flag is true (as in the snippet).

Debugging tips: test in a new private window to rule out form-history persistence, search your scripts for code that touches the select (as discovered), or add a temporary query string to force a fresh load like suggested. If you control server behavior and intend XML parsing, confirm the Content-Type header is correct for XHTML; otherwise treat the page as HTML. Finally, avoid forcibly resetting values on pages where preserving the user's input matters.

Recommended Answers

All 15 Replies

Member Avatar for MattEvans

are you using an HTML or XHTML doctype?

in HTML doctypes it's ok to set boolean attributes without values, in XHTML doctypes it is not.

in XHTML you have got to use:

selected="selected", or selected="yes", or selected="true"

Member Avatar for nathanpacker

are you using an HTML or XHTML doctype?

in HTML doctypes it's ok to set boolean attributes without values, in XHTML doctypes it is not.

in XHTML you have got to use:

selected="selected", or selected="yes", or selected="true"

Lol, well, I don't know enough to stay XHTML valid, but if I know it I will, so thanks for the info.

Member Avatar for MattEvans

does it work in Firefox if you use one of those atttribute values instead of just 'selected'?

it's not so much a question of staying valid, as being compatible.

an absolutely 'correct' XML parser should reject that line of code and output a warning/error message instead of an expected output. But, Firefox only ever truely parses a page as X(HT)ML if you serve the Content-Type:application/xhtml+xml* header.

* not sure if that's the correct type, it's not an easy one to remember.

Member Avatar for nathanpacker

does it work in Firefox if you use one of those atttribute values instead of just 'selected'?

it's not so much a question of staying valid, as being compatible.

an absolutely 'correct' XML parser should reject that line of code and output a warning/error message instead of an expected output. But, Firefox only ever truely parses a page as X(HT)ML if you serve the Content-Type:application/xhtml+xml* header.

* not sure if that's the correct type, it's not an easy one to remember.

Well, to be honest, after I read your reply, I went back to go change it, and I decided to look at the page one more time, and it was working! I have no idea why. So I didn't change it. Maybe I'll change it just to please our curiosity now...

Member Avatar for nathanpacker

Ok, I just tried it again. And I realized when I said it was working before, it was because I was simply refreshing the page, but apparently Firefox retains all the information, so it didn't matter what had "selected" in the script, it was just selecting the one that was previously selected.

So I closed the window, opened a new one, and realized it wasn't working with just "selected" in the script. When i changed it to selected="yes", it worked.
Thanks.

Member Avatar for kevindougans

Thanks a lot, would have spent hours trying to get it working if it wasn't for this thread.

The outcome: Firefox retains the last value you had a form field at when hitting refresh so to debug/test add "?1" or something similar to the URL to restart from afresh. Ctrl+Refresh doens't even work.

Next of all, 'SELECTED="yes"' worked in the end for me.

Thanks again!

Member Avatar for trudge

From what I know, Shift-Refresh will force most Mozilla browsers to grab a new copy of a page from the server rather than cache.

Member Avatar for kevindougans

yes you are correct, i edited content on the page and the content change but for whatever reason it doesn't refresh the form fields from the options you had last selected. i guess some would find this feature cool so they don't have to keep refilling forms out.

Member Avatar for MidiMagic

Whether or not to clear fields is a setting.

Member Avatar for emsee

Ok, I just tried it again. And I realized when I said it was working before, it was because I was simply refreshing the page, but apparently Firefox retains all the information, so it didn't matter what had "selected" in the script, it was just selecting the one that was previously selected.

So I closed the window, opened a new one, and realized it wasn't working with just "selected" in the script. When i changed it to selected="yes", it worked.
Thanks.

do it like this: <option selected=true blsa sldfsmdkask></option>
this will work, in ff2.0 and ie7 (thats what i have)

Member Avatar for T2DMan

I have the same problem of firefox remembering the previous setting. And yes, I see where that is able to be disabled in the firefox options.

selected="yes" is not valid xhtml, should be selected="selected"

The autocomplete="off" does not even work :(

I am using the autocomplete in the <form > to try and disable for a drop down menu.

Any other ideas?

Member Avatar for MidiMagic

The quotes must be there in XHTML. It must be in the selected="selected" form, not the selected=selected form.

Member Avatar for T2DMan

Found out that there was some javascript being used to override the settings. Bugfixing someone elses code, sometimes things are a little hidden.

Now working perfectly.

Member Avatar for xandrani

do it like this: <option selected=true blsa sldfsmdkask></option>
this will work, in ff2.0 and ie7 (thats what i have)

You need to make sure that "Firefox Preferences -> Privacy -> remember search and form history" is unchecked.

I know this post is very old, BUT people do google for things like this, so it's good if there's a solution even if it's years later for the actual people. I wish some people on forums would understand this obvious fact!!!!!! Instead of moaning about lates posts!

commented: but you will still get a snide comment from somebody +4
Member Avatar for homez

I just tried setting ocassional name attribute for select element in my PHP (based on current time, or you can also use random numbers). After refreshing such a page in FF, if you have done some changes to selections, they become ignored, the form gets totally reloaded.

P.S. Maybe you could just change something else in page text to make it totally reloaded, i didn't check it yet.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.