Suppression d'un élément d'une boîte de sélection

Question

Comment supprimer ou ajouter des éléments dans une boîte de sélection ? J'utilise jQuery, ce qui devrait faciliter la tâche. Vous trouverez ci-dessous 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>

Answer 1

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>

Ajouter 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>

Answer 2

Cette fonction permet de supprimer l'élément sélectionné :

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

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

Answer 3

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 boîte 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;

Mais pas jQuery.

Answer 4

Pour supprimer un élément

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

Pour ajouter un élément

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

Pour vérifier une option

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

Pour supprimer une option sélectionnée

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

Answer 5

Je trouve que l'application jQuery plugin de manipulation des boîtes de sélection utile pour ce genre de choses.

Vous pouvez facilement supprimer un élément par index, par valeur ou par expression rationnelle.

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 procéder comme suit $("#myselect").removeOption(/./); .