Comment supprimer toutes les options d'une boîte de sélection, puis ajouter une option et la sélectionner avec jQuery?


1077

En utilisant core jQuery, comment supprimez-vous toutes les options d'une boîte de sélection, puis ajoutez une option et sélectionnez-la?

Ma case de sélection est la suivante.

<Select id="mySelect" size="9"> </Select>

EDIT: Le code suivant a été utile pour le chaînage. Cependant (dans Internet Explorer) .val('whatever')n'a pas sélectionné l'option qui a été ajoutée. (J'ai utilisé la même «valeur» dans les deux .appendet .val.)

$('#mySelect').find('option').remove().end()
.append('<option value="whatever">text</option>').val('whatever');

EDIT: En essayant de le faire imiter ce code, j'utilise le code suivant chaque fois que la page / le formulaire est réinitialisé. Cette case de sélection est remplie par un ensemble de boutons radio. .focus()était plus proche, mais l'option ne semblait pas sélectionnée comme elle le fait avec .selected= "true". Rien ne va mal avec mon code existant - j'essaie juste d'apprendre jQuery.

var mySelect = document.getElementById('mySelect');
mySelect.options.length = 0;
mySelect.options[0] = new Option ("Foo (only choice)", "Foo");
mySelect.options[0].selected="true";

EDIT: la réponse sélectionnée était proche de ce dont j'avais besoin. Cela a fonctionné pour moi:

$('#mySelect').children().remove().end()
.append('<option selected value="whatever">text</option>') ;

Mais les deux réponses m'ont conduit à ma solution finale ..

Réponses:


1695
$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;

3
@nickf: J'ai le même problème, mais je dois ajouter un ensemble de cases à cocher plutôt qu'une sur le changement de liste déroulante mais mes cases à cocher proviennent de xml. cela ne fonctionne pas
defau1t

10
Notez que vous pouvez également diviser l'option / attr / text comme:.append($("<option></option>").attr("value", '123').text('ABC!')
Brock Hensley

1
@BrockHensley, je crois que la vraie élégance de cette réponse est un chaînage correct en combo avec la fonction end (). Votre suggestion fonctionnera également. De la documentation de l'API jQuery: "La plupart des méthodes de traversée DOM de jQuery fonctionnent sur une instance d'objet jQuery et en produisent une nouvelle, correspondant à un ensemble différent d'éléments DOM. Lorsque cela se produit, c'est comme si le nouvel ensemble d'éléments était poussé sur une pile qui est conservé à l'intérieur de l'objet. Chaque méthode de filtrage successive pousse un nouvel ensemble d'éléments sur la pile. Si nous avons besoin d'un ensemble d'éléments plus ancien, nous pouvons utiliser end () pour retirer les ensembles de la pile. "
Anthony Mason,

1
c'était la seule façon dont j'ai pu reconstruire mon menu et changer l'option sélectionnée dans jQuery Mobile sur PhoneGap pour iOS. Un rafraîchissement du menu par la suite était également nécessaire.
terminé

3
@BrockHensley, vous pourriez même aller jusqu'à.append($("<option></option>", {'value':'123'}).text('ABC!')
vahanpwns

710
$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;

34
Par curiosité, est-ce que «vide» est plus rapide que «trouver»? On dirait que ce serait - parce que le «trouver» utiliserait un sélecteur et «vide» ne ferait que vider l'élément par force brute.
Dan Esparza

52
@DanEsparza Je t'ai fait un jsperf; empty()s'est avéré plus rapide bien sûr;) jsperf.com/find-remove-vs-empty
vzwick

J'ai eu un petit problème bizarre avec cette solution. La partie remplie est correcte, mais lorsque j'essaie de sélectionner une valeur (dans mon cas, un jour), je peux consigner la valeur, mais la valeur affichée dans le champ de sélection reste dans la première valeur .... Je peux pas le résoudre: /
Takács Zsolt

5
@ TakácsZsolt Vous devriez peut-être ajouter un .val('whatever')à la fin de la chaîne comme dans la réponse de Matt.
Kodos Johnson

.empty () fonctionne avec matérialiser, tandis que .remove () n'a pas fonctionné
OverlordvI

127

pourquoi ne pas simplement utiliser du javascript simple?

document.getElementById("selectID").options.length = 0;

7
Je conviens que c'est la solution la plus simple pour supprimer toutes les options, mais cela ne répond qu'à la moitié de la question ...
Elezar

2
Cela ne créerait-il pas une fuite de mémoire? Les éléments d'option sont désormais inaccessibles mais toujours alloués.
Synetech

1
Plain Old JS FTW (pour la victoire) !!! :)
raddevus

78

Si votre objectif est de supprimer toutes les options de la sélection, sauf la première (généralement l'option «Veuillez sélectionner un élément»), vous pouvez utiliser:

$('#mySelect').find('option:not(:first)').remove();

10
Cela devrait être la réponse. Tous les autres ont intentionnellement supprimé le premier en vue de le recréer ensuite, ce que je n'aime pas; cela implique également qu'ils ont également stocké la première option quelque part en premier.

76

J'ai eu un bogue dans IE7 (fonctionne très bien dans IE6) où l'utilisation des méthodes jQuery ci-dessus effacerait la sélection dans le DOM mais pas à l'écran. En utilisant la barre d'outils du développeur IE, je pouvais confirmer que la sélection avait été effacée et contenait les nouveaux éléments, mais visuellement, la sélection montrait toujours les anciens éléments - même si vous ne pouviez pas les sélectionner.

Le correctif consistait à utiliser les méthodes / propriétés DOM standard (comme l'original de l'affiche) pour effacer plutôt que jQuery - toujours en utilisant jQuery pour ajouter des options.

$('#mySelect')[0].options.length = 0;

6
J'ai également dû utiliser cette méthode dans ie6 car .empty () a rendu visible ma boîte de sélection contenue dans un conteneur caché même lorsque le parent était caché.
Code Commander

2
Cette méthode s'avère également être un tout petit peu (environ 1%) plus performante: jsperf.com/find-remove-vs-empty
vzwick le

3
+1 c'est la plus lisible (à mon avis) et dans le lien jsPerf (lié @vzwick) la réponse acceptée était 34% plus lente (Opera 20)
Morvael

35

Je ne sais pas exactement ce que vous entendez par "ajouter un et sélectionnez-le", car il sera sélectionné par défaut de toute façon. Mais, si vous deviez en ajouter plusieurs, cela aurait plus de sens. Que diriez-vous de quelque chose comme:

$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();

Réponse à "EDIT" : Pouvez-vous préciser ce que vous entendez par "Cette case de sélection est remplie par un ensemble de boutons radio"? Un <select>élément ne peut pas (légalement) contenir des <input type="radio">éléments.


27
$('#mySelect')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;

2
Nous utilisons toujours IE6 et cette méthode n'a pas fonctionné. Cependant, cela a fonctionné dans FF 3.5.6
Jay Corbett

3
pourrait devoir ajouter .change () à la fin pour déclencher le changement de sélection
Hayden Chambers

22
$("#control").html("<option selected=\"selected\">The Option...</option>");

12

Grâce aux réponses que j'ai reçues, j'ai pu créer quelque chose comme le suivant, qui correspond à mes besoins. Ma question était quelque peu ambiguë. Merci d'avoir suivi. Mon dernier problème a été résolu en incluant "sélectionné" dans l'option que je voulais sélectionner.

$(function() {
  $('#mySelect').children().remove().end().append('<option selected value="One">One option</option>') ; // clear the select box, then add one option which is selected
  $("input[name='myRadio']").filter( "[value='1']" ).attr( "checked", "checked" ); // select radio button with value 1
  // Bind click event to each radio button.
  $("input[name='myRadio']").bind("click",
                                  function() {
    switch(this.value) {
      case "1":
        $('#mySelect').find('option').remove().end().append('<option selected value="One">One option</option>') ;
        break ;
      case "2":
        $('#mySelect').find('option').remove() ;
        var items = ["Item1", "Item2", "Item3"] ; // Set locally for demo
        var options = '' ;
        for (var i = 0; i < items.length; i++) {
          if (i==0) {
            options += '<option selected value="' + items[i] + '">' + items[i] + '</option>';
          }
          else {
            options += '<option value="' + items[i] + '">' + items[i] + '</option>';
          }
        }
        $('#mySelect').html(options);   // Populate select box with array
        break ;
    } // Switch end
  } // Bind function end
                                 ); // bind end
}); // Event listener end
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>One<input  name="myRadio" type="radio" value="1"  /></label>
<label>Two<input name="myRadio"  type="radio" value="2" /></label>
<select id="mySelect" size="9"></select>


8

Que diriez-vous de simplement changer le code HTML en nouvelles données.

$('#mySelect').html('<option value="whatever">text</option>');

Un autre exemple:

$('#mySelect').html('
    <option value="1" selected>text1</option>
    <option value="2">text2</option>
    <option value="3" disabled>text3</option>
');

8
  1. Tout d'abord, effacez toutes les options existantes, sauf la première (- Select--)

  2. Ajouter de nouvelles valeurs d'options en utilisant une boucle une par une

    $('#ddlCustomer').find('option:not(:first)').remove();
    for (var i = 0; i < oResult.length; i++) {
       $("#ddlCustomer").append(new Option(oResult[i].CustomerName, oResult[i].CustomerID + '/' + oResult[i].ID));
    }

7

J'ai trouvé sur le net quelque chose comme ci-dessous. Avec des milliers d'options comme dans ma situation, c'est beaucoup plus rapide que .empty()ou à .find().remove()partir de jQuery.

var ClearOptionsFast = function(id) {
    var selectObj = document.getElementById(id);
    var selectParentNode = selectObj.parentNode;
    var newSelectObj = selectObj.cloneNode(false); // Make a shallow copy
    selectParentNode.replaceChild(newSelectObj, selectObj);
    return newSelectObj;
}

Plus d'infos ici .



7
$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');

La première ligne de code supprimera toutes les options d'une boîte de sélection car aucun critère de recherche d'option n'a été mentionné.

La deuxième ligne de code ajoutera l'option avec la valeur spécifiée ("testValue") et le texte ("TestText").


Bien que cela puisse répondre à la question, il serait beaucoup plus utile si vous fournissiez une explication sur la façon dont il y répond.
Nick

6

S'appuyant sur la réponse de Mauretto, c'est un peu plus facile à lire et à comprendre:

$('#mySelect').find('option').not(':first').remove();

Pour supprimer toutes les options sauf une avec une valeur spécifique, vous pouvez utiliser ceci:

$('#mySelect').find('option').not('[value=123]').remove();

Ce serait mieux si l'option à ajouter était déjà là.


4

Utilise le jquery prop () pour effacer l'option sélectionnée

$('#mySelect option:selected').prop('selected', false);

1
.prop () n'entre en vigueur que dans jQuery 1.6+. Pour jQuery 1.5-, utilisez .attr ()
Agi Hammerthief

4

Cela remplacera votre mySelect existant par un nouveau mySelect.

$('#mySelect').replaceWith('<Select id="mySelect" size="9">
   <option value="whatever" selected="selected" >text</option>
   </Select>');

4

Vous pouvez le faire simplement en remplaçant html

$('#mySelect')
.html('<option value="whatever" selected>text</option>')
.trigger('change');

4

Une seule ligne pour supprimer toutes les options de la balise de sélection et après avoir ajouté des options, créez une deuxième ligne pour ajouter des options.

$('.ddlsl').empty();

$('.ddlsl').append(new Option('Select all', 'all'));

2
  • enregistrer les valeurs des options à ajouter dans un objet
  • effacer les options existantes dans la balise de sélection
  • itérer l'objet de liste et ajouter le contenu à la balise de sélection voulue

var listToAppend = {'':'Select Vehicle','mc': 'Motor Cyle', 'tr': 'Tricycle'};

$('#selectID').empty();

$.each(listToAppend, function(val, text) {
    $('#selectID').append( new Option(text,val) );
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



1

J'espère que cela fonctionnera

$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));

cela fonctionne si plus alors l'option je ne peux pas sélectionner le second
Anburaj_N

0
var select = $('#mySelect');
select.find('option').remove().end()
.append($('<option/>').val('').text('Select'));
var data = [{"id":1,"title":"Option one"}, {"id":2,"title":"Option two"}];
for(var i in data) {
    var d = data[i];
    var option = $('<option/>').val(d.id).text(d.title);
    select.append(option);
}
select.val('');
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.