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?

• Tushar Gupta - curioustushar: setting it in HTML is better.
• Michal: that may be but I have no access to the <option>, I need to do it from the <select>
• Tushar Gupta - curioustushar: $('select[name="country"]').val('value')
• A. Wolff: @Michal "but I have no access to the <option>" How is that possible?
• Michal: @A.Wolff it's plain HTML... not the best solution I know, but can't redo it now anymore...

Answer 1

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.

• Michal: 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...
• Darin Dimitrov: 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.

Answer 2

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);