web-dev-qa-db-fra.com

jQuery ajoute une option vide en haut de la liste et sélectionne la liste déroulante existante

J'ai donc une liste déroulante

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

Voilà ce que j'aimerais

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

Si vous essayez d'ajouter une option vide avant et de la définir sur cette option, vous souhaitez obliger l'utilisateur à sélectionner une valeur dans la liste d'origine, mais vous souhaitez qu'elle soit vide lorsqu'il voit l'option qu'il doit choisir.

Essayer cela mais ne fonctionne pas

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

et j'ai essayé mais efface les autres valeurs

$('#theSelectId option').prependTo('<option value=""></option>');
jqueryselectdrop-down-menu
58
Phill Pafford

Cela a fonctionné:

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

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

Vous pouvez également utiliser .prependTo si vous souhaitez inverser l'ordre:

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

Solution native Javascript:

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

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

3
Snoozer