JQuery добавить пустой параметр в верхней части списка и сделать выбранный для существующего раскрывающегося списка

Question

Поэтому у меня есть выпадающий список

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

Это то, что я хотел бы

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

Попытка добавить пустой параметр перед тем и настройте его на это, хотите, чтобы пользователь принуждал пользователя выбирать значение из исходного списка, но хотел бы, чтобы оно было пустым, когда они видят параметр, который им нужно выбрать.

Попытка это, но не работает

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

, и я попытался это, но очищает другие значения

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

Answer 1

Это работало:

$("#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> 

Вы также можете использовать .prependTo, если вы хотите изменить порядок:

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

Answer 2

Решение родной Javascript:

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

Пример: http://codepen.io/anon/pen/GprybL