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

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

pourquoi ne pas utiliser simplement javascript?

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

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

la solution était d'utiliser des méthodes DOM standard/properites (comme l'affiche originale avait) à effacer plutôt que jQuery - toujours en utilisant jQuery pour ajouter des options.

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

si votre but est de supprimer toutes les options de select sauf la première (typiquement l'option' s'il vous plaît choisir un article'), vous pouvez utiliser:

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

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

ne sait pas exactement ce que vous voulez dire par" ajouter un et le sélectionner", car il sera sélectionné par défaut de toute façon. Mais, si vous ajoutez plus d'un, il 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 voulez dire par "cette zone de sélection est peuplée par un ensemble de boutons radio"? Un élément ne peut pas (légalement) contenir des éléments < input type="radio".

23

répondu Bobby Jack 2008-09-08 22:28:36

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

20

répondu jvarandas 2011-03-30 02:30:23

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

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

10

répondu Jay Corbett 2016-08-24 11:41:38

1. le Premier clair de capter tous les option execpt la première(--Select--)

2. ajouter de nouvelles valeurs d'option en utilisant la boucle un par un

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

8

répondu Jaydeep Shil 2017-08-07 12:19:17

pourquoi ne pas simplement changer le html en nouvelles données.

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

autre exemple:

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

7

répondu Shiv 2016-02-01 15:29:08

une autre voie:

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

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

7

répondu Jhon Intriago Thoth 2017-07-13 16:49:53

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

complément d'information ici .

6

répondu marioosh 2015-04-08 09:42:42

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 était déjà là.

6

répondu humbads 2015-06-18 13:52:28

ceci remplacera votre mySelect existant par un nouveau mySelect.

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

4

répondu Barun 2015-08-03 07:07:41

vous pouvez le faire simplement en remplaçant html

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

4

répondu Nadeem Manzoor 2016-10-04 00:07:09

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

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

3

répondu mehrdad 2014-02-01 11:27:54

Espère que cela va fonctionner

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

1

répondu Md. Russel Hussain 2016-10-23 04:06:55

• enregistrer les valeurs de l'option à ajouter dans un objet
• Effacer les options existantes dans la balise select
• itérer l'objet list et ajouter le contenu à la balise select 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>

1

répondu Nifemi Sola-Ojo 2018-09-03 11:17:37

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

0

répondu LN Nitharsan 2018-08-19 17:38:08

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

la première ligne de code supprimera toutes les options d'une case select car aucune option find criteria n'a été mentionnée.

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

-1

répondu Devkinandan Chauhan 2018-10-12 10:59:19