Setting <select> element's default value - alternatives

Question

is it possible to set a default value of a <select> element without using the selected option on the element?

I am looking for a solution that would work from the <select> element itself, something like:

<select name="country" style="width:210px;" [defaultvalue="option1"]> ....options.... </select>

(enclosed in the [ ] is for illustration of what I am looking for)

Is it possible to do this HTML only? Or better set it with jQuery? Other ideas?

that may be but I have no access to the <option>, I need to do it from the <select> — Michal
– Michal, Commented Sep 15, 2013 at 15:47
@Michal "but I have no access to the <option>" How is that possible? — A. Wolff
– A. Wolff, Commented Sep 15, 2013 at 15:51
@A.Wolff it's plain HTML... not the best solution I know, but can't redo it now anymore... — Michal
– Michal, Commented Sep 15, 2013 at 15:53

Darin Dimitrov · Accepted Answer · 2013-09-15 15:48:03Z

If you want to use jQuery and set the default value on the client you could use the .val() function:

$('select[name="country"]').val('fr-FR');

Assuming you have an <option> element with value="fr-FR" this will effectively preselct this option in the dropdown.

Obviously if you are using a server side language to generate your markup it would be better to add the selected="selected" attribute on the corresponding option directly on the server rather than on some client scripting. This would be semantically more correct. This way you won't even be relying on some client scripting and clients that might have disabled javascript and so on. Your server would have accomplished his job by generating semantiaclly correct markup and now it will be the responsibility of the user agent to display this markup.

I know, but that's the problem - it's not generated dynamically and doing it this way is shorter than redo it to be done serverside...
Sure, go ahead and use javascript if you will. I am just mentioning the best practice in this case so that other people having the same issue and stumbling upon this question do not make the same mistake as you did. Of course you might have some constraints that are preventing you from using the best practice in this case. That's why I also provided you with an alternative using the .val() function.

OneOfOne · Accepted Answer · 2013-09-15 15:54:05Z

It can't be done without using the selected attribute or javascript, however, here's a little example of how to do it with jquery :

<select name="country" style="width:210px;" data-default="egypt"> ....options.... </select>

var sel = $('select[name="country"]'), def = sel.data('default'); if(def) sel.val(def);

Collectives™ on Stack Overflow

Setting <select> element's default value - alternatives

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related