jquery - menus - menu desplegable vertical html

jQuery agrega una opción en blanco a la parte superior de la lista y selecciona el menú desplegable existente

Question

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

Intentando agregar una opción en blanco antes y configurarla para esto, quiere obligar al usuario a seleccionar un valor de la lista original, pero le gustaría que esté en blanco cuando vean la opción que tienen que elegir.

Probando esto pero no trabajando

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

y lo he intentado pero borra los otros valores

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

Answer 1

Esto funcionó:

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

Salida 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 podría usar .prependTo si desea invertir el orden:

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

Answer 2

Javascript nativo de la solución:

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

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