jQuery añadir opción en blanco al principio de la lista y hacer seleccionada para desplegable

Question

existente Así que tengo una lista desplegable

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

Esto es lo que me gustaría

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

Tratar de añadir una opción en blanco antes y configurarlo para esto, quiere obligar al usuario a seleccionar un valor de la lista original, pero le gustaría que esté en blanco cuando vea la opción que tiene que elegir.

Tratando esto, pero no trabajar

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

y he probado esto, sino que se borra a los otros valores

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

Answer 1

Esto funcionó: salida

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

Firebug:

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

También es posible usar .prependTo si desea invertir el orden:

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

Answer 2

Solución Javascript orígenes:

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

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