javascript - valeur - selection jquery




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

En utilisant core jQuery, comment supprimer toutes les options d'une boîte 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>

EDIT: Le code suivant a été utile avec 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 .append et .val .)

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

EDIT: En essayant de l'obtenir pour imiter ce code, j'utilise le code suivant chaque fois que la page / formulaire est réinitialisé. Cette boîte 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 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";

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.


  1. Tout d'abord effacer toutes les options existantes le premier (- Select--)

  2. Ajouter de nouvelles valeurs d'options 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));
    }
    

Autrement:

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

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


Grâce aux réponses que j'ai reçues, j'ai pu créer quelque chose comme ce qui suit, qui correspond à mes besoins. Ma question était quelque peu ambiguë. Merci d'avoir suivi. Mon dernier problème a été résolu en incluant "selected" 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>


J'ai eu un bogue dans IE7 (fonctionne bien dans IE6) où l'utilisation des méthodes jQuery ci-dessus effacerait la sélection dans le DOM, mais pas à l'écran. À l'aide de la barre d'outils IE Developer, je pouvais confirmer que la sélection avait été effacée et que les nouveaux éléments étaient présents, mais visuellement, la sélection affichait 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 le faisait l'original de l'affiche) pour effacer plutôt que jQuery - en utilisant toujours jQuery pour ajouter des options.

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

J'espère que ça marchera

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

Pourquoi ne pas simplement utiliser javascript?

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

S'appuyant sur la réponse de Mauro, 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à.


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

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

Vous ne savez pas exactement ce que vous entendez par "ajouter un et le sélectionner", car il sera sélectionné par défaut de toute façon. Mais, si vous deviez en ajouter plus d'un, 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 case de sélection est remplie par un ensemble de boutons radio"? Un élément <select> ne peut pas (légalement) contenir des éléments <input type = "radio">.


Vous pouvez le faire simplement en remplaçant html

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

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

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






html-select