Supprimer un élément d'une zone de sélection


269

Comment supprimer ou ajouter des éléments dans une zone de sélection? J'utilise jQuery, si cela rend la tâche plus facile. Voici un exemple de boîte de sélection.

<select name="selectBox" id="selectBox">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>    
</select>

Réponses:


491

Supprimer une option:

$("#selectBox option[value='option1']").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectBox" id="selectBox">
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>	
</select>

Ajoutez une option:

$("#selectBox").append('<option value="option5">option5</option>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectBox" id="selectBox">
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>	
</select>


7
Si vous devez supprimer une option et en sélectionner une autre: $ ('# selectBox'). Val ('option2'). Find ('option [value = "option1"]'). Remove ();
Radu Maris

8
Honnêtement, je pense que la façon dont les boîtes de sélection sont manipulées via javascript est l'une des choses les plus déroutantes de tous les temps, même lorsque vous avez une assez bonne compréhension des sélecteurs et du DOM.
Tacroy

79

Vous pouvez supprimer l'élément sélectionné avec ceci:

$("#selectBox option:selected").remove();

Ceci est utile si vous avez une liste et non une liste déroulante.


Il supprime tout pour moi ... Attendez, j'utilise Select avec plusieurs attributs. Comment puis-je le supprimer de la sélection multiple?
Akshay

27
window.onload = function ()
{   
    var select = document.getElementById('selectBox');
    var delButton = document.getElementById('delete');

    function remove()
    {
        value = select.selectedIndex;
        select.removeChild(select[value]);
    }

    delButton.onclick = remove;    
}

Pour ajouter l'article, je créerais une deuxième zone de sélection et:

var select2 = document.getElementById('selectBox2');
var addSelect = document.getElementById('addSelect');

function add()
{
    value1 = select2.selectedIndex;
    select.appendChild(select2[value1]);    
}

addSelect.onclick = add;

Pas jQuery cependant.


4
@JBeckton: en repensant à cela écrit il y a 4 ans, je ris de moi-même et tu as raison :)
Adriana

25

Pour supprimer un élément

$("select#mySelect option[value='option1']").remove(); 

Pour ajouter un élément

$("#mySelect").append('<option value="option1">Option</option>');

Pour rechercher une option

$('#yourSelect option[value=yourValue]').length > 0;

Pour supprimer une option sélectionnée

$('#mySelect :selected').remove(); 

20

Cela devrait le faire:

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

18

Je trouve le plugin de manipulation de boîte de sélection jQuery utile pour ce type de chose.

Vous pouvez facilement supprimer un élément par index, valeur ou expression régulière.

removeOption(index/value/regex/array[, selectedOnly])

Remove an option by
- index: $("#myselect2").removeOption(0);
- value: $("#myselect").removeOption("Value");
- regular expression: $("#myselect").removeOption(/^val/i);
- array $("#myselect").removeOption(["myselect_1", "myselect_2"]);

Pour supprimer toutes les options, vous pouvez le faire $("#myselect").removeOption(/./);.


5
-1 car cela peut être fait sans plugin en utilisant jQuery et une programmation de base.
Slopeside Creative

ᕀ 1 pourquoi réinventer la roue
John Hascall

9

Ajout / suppression de valeur dynamique sans code physique:

// supprime la valeur de la sélection dynamiquement

$("#id-select option[value='" + dynamicVal + "']").remove();

// Ajouter une valeur dynamique pour sélectionner

$("#id-select").append('<option value="' + dynamicVal + '">' + dynamicVal + '</option>');



5

Juste pour augmenter cela pour tous ceux qui recherchent, vous pouvez également:

$("#selectBox option[value='option1']").hide();

et

$("#selectBox option[value='option1']").show();

Je pense que cela dépend du navigateur. Cela pourrait simplement désactiver cette option particulière.
Adam Ware

Je ne recommande pas cette méthode, car elle est spécifique au navigateur.
Scott Shaw-Smith

Ceci est un ancien post mais je voudrais faire un commentaire à ce sujet. Bien que ce soit une très bonne façon de traiter une option sélectionnée, elle n'est pas recommandée car IE ne la prend pas en charge
Ahmed Ali

4

Javascript

function removeOptionsByValue(selectBox, value)
{
  for (var i = selectBox.length - 1; i >= 0; --i) {
    if (selectBox[i].value == value) {
      selectBox.remove(i);
    }
  }
}

function addOption(selectBox, text, value, selected)
{
  selectBox.add(new Option(text, value || '', false, selected || false));
}

var selectBox = document.getElementById('selectBox');

removeOptionsByValue(selectBox, 'option3');
addOption(selectBox, 'option5', 'option5', true);
<select name="selectBox" id="selectBox">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>	
</select>

jQuery

jQuery(function($) {
  $.fn.extend({
    remove_options: function(value) {
      return this.each(function() {
        $('> option', this)
          .filter(function() {
            return this.value == value;
          })
          .remove();
      });
    },
    add_option: function(text, value, selected) {
      return this.each(function() {
        $(this).append(new Option(text, value || '', false, selected || false));
      });
    }
  });
});

jQuery(function($) {
  $('#selectBox')
    .remove_options('option3')
    .add_option('option5', 'option5', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectBox" id="selectBox">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>	
</select>


2

J'ai dû supprimer la première option d'une sélection, sans ID, uniquement une classe, j'ai donc utilisé ce code avec succès:

$('select.validation').find('option:first').remove();

0

Je veux juste suggérer une autre façon d'ajouter un option. Au lieu de définir le valueet textcomme une chaîne, vous pouvez également faire:

var option = $('<option/>')
                  .val('option5')
                  .text('option5');

$('#selectBox').append(option);

Il s'agit d'une solution moins sujette aux erreurs lors de l'ajout dynamique de valeurs et de textes d'options.


Je ne suis pas le downvoter mais il semble que vous ayez répondu à mi-chemin OP sur la façon d'ajouter une option, mais pas sur la façon de supprimer une option.
John Odom

0

Si quelqu'un a besoin de supprimer TOUTES les options dans une sélection, j'ai fait une petite fonction.

J'espère que tu trouves cela utile

var removeAllOptionsSelect = function(element_class_or_id){
    var element = $(element_class_or_id+" option");
    $.each(element,function(i,v){
        value = v.value;
        $(element_class_or_id+" option[value="+value+"]").remove(); 
    })
}

Il suffit de courir

removeAllOptionsSelect("#contenedor_modelos");

2
Le résultat n'est-il pas égal à $('#contenedor_modelos').empty();? Ravi de voir de l'action cependant :)
MineSweeper

0

c'est sélectionner la case html

<select name="selectBox" id="selectBox">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>    
</select>

lorsque vous souhaitez supprimer totalement et ajouter une option dans la zone de sélection, vous pouvez utiliser ce code

$("#selectBox option[value='option1']").remove();
$("#selectBox").append('<option value="option1">Option</option>');

parfois, nous devons masquer et afficher l'option de la zone de sélection, mais pas la supprimer, vous pouvez utiliser ce code

 $("#selectBox option[value='option1']").hide();
 $("#selectBox option[value='option1']").show();

parfois besoin de supprimer l'option sélectionnée de la zone de sélection, puis

$('#selectBox :selected').remove();
$("#selectBox option:selected").remove();

lorsque vous devez supprimer toutes les options, ce code

('#selectBox').empty();

lorsque vous avez besoin de la première option ou de la dernière, ce code

$('#selectBox').find('option:first').remove();
$('#selectBox').find('option:last').remove();
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.