jQuery fügen Sie oben in der Liste eine leere Option hinzu und wählen Sie die vorhandene Dropdown-Liste aus

Ich habe also eine Dropdown-Liste

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

Das möchte ich

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

Wenn Sie versuchen, zuvor eine leere Option hinzuzufügen und auf diese festzulegen, möchten Sie den Benutzer zwingen, einen Wert aus der ursprünglichen Liste auszuwählen, möchten aber, dass er leer ist, wenn er die Option sieht, die er auswählen muss.

Versuchen Sie dies, aber es funktioniert nicht

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

und ich habe dies versucht, aber die anderen Werte werden gelöscht

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

Das hat funktioniert:

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

Firebug-Ausgabe:

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

Könntest du auch verwenden .prependTo Wenn Sie die Reihenfolge stornieren möchten:

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

Lösung natives Javascript:

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

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