Select box with empty option, which is not present in html dom

Question

At this website: http://www.salus.si/en (if you click on "change" in top banner*) the select element starts with an empty option. HTML looks like this:

<select id="cc-preference-selector-analytics">
    <option value="yes">I accept</option>
    <option value="no">I do not accept</option>
</select>

Here is the same select element in jsfiddle: http://www.jsfiddle.net/JG89n - which shows the first option. Why is this happening?

Thanks.

**If you have "Send do not track headers" enabled in your browser, you wont see the banner. Its a cookie consent banner which doesn't get displayed if user has this feature enabled. IE10 has it enabled by default. Banner looks like this (top of the page): Site screenshot *

sorry, but where is the "change" option in the top banner, i cant find it :P. Maybe there is some script executed to add an empty option? — r3bel
– r3bel, Commented Jun 16, 2013 at 20:39
If you have "Send do not track headers" enabled in your browser, you wont see the banner. Its a cookie consent banner which doesn't get displayed if user has this feature enabled. IE10 has it enabled by default. — Uros K
– Uros K, Commented Jun 16, 2013 at 20:44
I probably see what you call “top banner”, but it has no “change” element and the HTML (even the generated HTML) does not contain any select element. — Jukka K. Korpela
– Jukka K. Korpela, Commented Jun 16, 2013 at 21:51
OK now I see change in the mass of the tiny text, and clicking on it creates a popup-like dialog. This is usability nightmare, and accessibility nightmare. I suggest that you redesign the whole allow/disallow cookie business or omit it, instead of trying to fix the code. — Jukka K. Korpela
– Jukka K. Korpela, Commented Jun 16, 2013 at 21:55

Siva Charan · Accepted Answer · 2013-06-16 20:49:15Z

1

You haven't set the default option, so it displays empty.

If you want default selection as "I accept", do this way:-

<select id="cc-preference-selector-analytics">
    <option value="yes" selected="selected">I accept</option>
    <option value="no">I do not accept</option>
</select>

Update:

Mostly like, this is a browser behaviour and also I think your javascript can also cause this issue.

edited Jun 16, 2013 at 20:49

answered Jun 16, 2013 at 20:39

Siva Charan

18.1k10 gold badges64 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Alfie Over a year ago

FYI: In XHTML/HTML5, attribute minimization is forbidden, and the selected attribute must be defined as <option selected="selected">. w3schools.com/tags/att_option_selected.asp

Uros K Over a year ago

Thanks. But here is the jsfiddle with same code jsfiddle.net/JG89n - which shows the first option. Why is this happening?

r3bel Over a year ago

you have to add the selected="selected" attribute as Siva Charan said and Alfie correted :). In addition this could be browser specific, i get the first value also without the seleted attribute in firefox.

Sumurai8 Over a year ago

The only difference I can see is that the message seems to be added with javascript (and it probably behaves differently because of that?) rather than being loaded in the html document itself.

Uros K Over a year ago

Samurai8, here: bb-krema.com/intro the same js is used, same html for select box is generated, but result is different - there is no empty option.

|

Collectives™ on Stack Overflow

Select box with empty option, which is not present in html dom

1 Answer 1

Update:

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update:

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related