Rimozione di un elemento da una casella di selezione

Come rimuovo elementi o aggiungo elementi a una casella di selezione? Sto eseguendo jQuery, questo dovrebbe facilitare l'attività. Di seguito è riportato un esempio di casella di selezione.

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

Rimuovi un'opzione:

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

Aggiungi un'opzione:

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

Puoi eliminare l'elemento selezionato con questo:

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

Questo è utile se hai un elenco e non un menu a discesa.

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

Per aggiungere l'elemento vorrei creare la seconda casella di selezione e:

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

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

addSelect.onclick = add;

Non jQuery però.

Per rimuovere un oggetto

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

Per aggiungere un elemento

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

Per verificare un'opzione

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

Per rimuovere un'opzione selezionata

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

Questo dovrebbe farlo:

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

Trovo il plug-in di manipolazione della casella di selezione jQuery utile per questo tipo di cose.

Puoi rimuovere facilmente un oggetto per indice, valore o regex.

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

Per rimuovere tutte le opzioni, puoi farlo $("#myselect").removeOption(/./);.

Aggiunta / rimozione di valore in modo dinamico senza hard-code:

// rimuove il valore da select in modo dinamico

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

// Aggiungi valore dinamico da selezionare

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

Ho trovato due pagine che sembrano utili, è scritto per ASP.Net, ma dovrebbero valere le stesse cose:

1. Come aggiungere / rimuovere elementi da un elenco a discesa usando jQuery
2. Espressioni del selettore jQuery

I seguenti link saranno utili-

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

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

Solo per aumentare questo aspetto per chiunque cerchi, puoi anche solo:

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

e

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

Ho dovuto rimuovere la prima opzione da una selezione, senza ID, solo una classe, quindi ho usato questo codice con successo:

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

Voglio solo suggerire un altro modo per aggiungere un option. Invece di impostare valuee textcome stringa si può anche fare:

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

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

Questa è una soluzione meno soggetta a errori quando si aggiungono valori e testi delle opzioni in modo dinamico.

Se qualcuno ha bisogno di eliminare TUTTE le opzioni all'interno di una selezione, ho fatto una piccola funzione.

Spero che lo trovi 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(); 
    })
}

Devo solo correre

removeAllOptionsSelect("#contenedor_modelos");

questo è selezionare la casella 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>

quando si desidera rimuovere e aggiungere totalmente l'opzione dalla casella di selezione, è possibile utilizzare questo codice

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

a volte abbiamo bisogno di nascondere e mostrare l'opzione dalla casella di selezione, ma non rimuovere quindi è possibile utilizzare questo codice

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

a volte è necessario rimuovere l'opzione selezionata dalla casella di selezione quindi

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

quando è necessario rimuovere tutte le opzioni, questo codice

('#selectBox').empty();

quando è necessario prima opzione o ultimo quindi questo codice

$('#selectBox').find('option:first').remove();
$('#selectBox').find('option:last').remove();