JQuery adds an empty option to the top of the list and makes the existing dropdown menu selected

Question

So I have a drop down list

<select id="theSelectId"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> 

Here is what I would like

 <select id="theSelectId"> <option value="" selected="selected"></option> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> 

Trying to add an empty parameter before this and set it to this, you must force the user to select a value from the source list, but it must be empty when they see the parameter that they should select.

Attempt but not working

 // Add blank option var blankOption = {optVal : ''}; $.each(blankOption, function(optVal, text) { $('<option></option>').val(optVal).html(text).preprendTo('#theSelectId'); }); 

and I tried this but clears other values

 $('#theSelectId option').prependTo('<option value=""></option>'); 

Answer 1

This worked:

 $("#theSelectId").prepend("<option value='' selected='selected'></option>"); 

Firebug Output:

 <select id="theSelectId"> <option selected="selected" value=""/> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> 

You can also use .prependTo if you want to reorder:

 ​$("<option>", { value: '', selected: true }).prependTo("#theSelectId");​​​​​​​​​​​ 

Answer 2

Javascript based solution:

document.getElementById("theSelectId").insertBefore(new Option('', ''), document.getElementById("theSelectId").firstChild);

example: http://codepen.io/anon/pen/GprybL

Answer 3

$ ('# theSelectId option'). prependTo ('');

worked for me (safewebsolution.com)