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

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

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

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

pourquoi ne pas simplement utiliser du javascript simple?

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

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

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;

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.

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

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

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>

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

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

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 .

Autrement:

$('#select').empty().append($('<option>').text('---------').attr('value',''));

Sous ce lien, il existe de bonnes pratiques https://api.jquery.com/select/

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

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

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

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

Cela remplacera votre mySelect existant par un nouveau mySelect.

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

Vous pouvez le faire simplement en remplaçant html

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

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

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

J'ai vu ce code dans Select2 - Clearing Selections

$('#mySelect').val(null).trigger('change');

Ce code fonctionne bien avec jQuery même sans Select2

J'espère que cela fonctionnera

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

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