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

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>

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>

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.

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.

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

Cela devrait le faire:

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

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

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

J'ai trouvé deux pages qui semblent utiles, elles sont écrites pour ASP.Net, mais les mêmes choses devraient s'appliquer:

1. Comment ajouter / supprimer des éléments d'une liste déroulante à l'aide de jQuery
2. Expressions du sélecteur jQuery

Les liens suivants vous seront utiles-

http://api.jquery.com/remove/

http://api.jquery.com/append/

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

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

et

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

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>

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

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.

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

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