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

Итак, у меня есть раскрывающийся список

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

Ответ 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");

Ответ 2

Решение на основе Javascript:

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

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

Ответ 3

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

работал для меня (safewebsolution.com)