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

https://stackoverflow.com/questions/47824

09-06-2019
|

Question

En utilisant Core jQuery, comment supprimer toutes les options d'une zone de sélection, puis ajouter une option et la sélectionner ?

Ma boîte de sélection est la suivante.

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

MODIFIER: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 .append et .val.)

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

MODIFIER:En essayant de lui faire imiter ce code, j'utilise le code suivant chaque fois que la page/le formulaire est réinitialisé.Cette zone de sélection est remplie par un ensemble de boutons radio. .focus() était plus proche, mais l'option n'apparaissait pas sélectionnée comme c'est le cas avec .selected= "true".Rien ne va pas 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";

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

La solution

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

Autres conseils

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

pourquoi ne pas simplement utiliser du javascript simple ?

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

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

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

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

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

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

Je ne sais pas exactement ce que vous entendez par "ajouter un et sélectionner-le", car il sera de toute façon sélectionné par défaut.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 clarifier ce que vous entendez par « Cette zone de sélection est remplie par un ensemble de boutons radio » ?UN <select> l'élément ne peut pas (légalement) contenir <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 celui-ci, qui correspond à mes besoins.Ma question était quelque peu ambiguë.Merci pour le 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>

Effacez d’abord toutes les options existantes à l’exception de la première (--Select--)

Ajouter de nouvelles valeurs d'option en utilisant la 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));
}

Que diriez-vous simplement de 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>
');

Autrement:

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

Sous ce lien, il y a des bonnes pratiques https://api.jquery.com/select/

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() 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'informations ici.

En s'appuyant sur la réponse de Mauretto, ceci 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à.

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

La première ligne de code supprimera toutes les options d'une zone 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").

Utilise le jquery soutenir() 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');

J'espère que ça marchera

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

enregistrer les valeurs d'option à ajouter dans un objet
effacer les options existantes dans la balise select
parcourir l'objet de liste et ajouter le contenu à la balise de sélection prévue

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 select2https://select2.org/programmatic-control/add-select-clear-items#clearing-selections

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

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

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow