Entfernen eines Elements aus einem Auswahlfeld

Wie entferne ich Elemente aus einem Auswahlfeld oder füge sie einem Auswahlfeld hinzu? Ich verwende jQuery, sollte dies die Aufgabe erleichtern. Unten finden Sie ein Beispielauswahlfeld.

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

Entfernen Sie eine 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>

Fügen Sie eine Option hinzu:

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

Sie können das ausgewählte Element folgendermaßen löschen:

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

Dies ist nützlich, wenn Sie eine Liste und kein Dropdown haben.

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

Um den Artikel hinzuzufügen, würde ich ein zweites Auswahlfeld erstellen und:

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

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

addSelect.onclick = add;

Nicht jQuery.

So entfernen Sie einen Artikel

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

So fügen Sie einen Artikel hinzu

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

Nach einer Option suchen

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

So entfernen Sie eine ausgewählte Option

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

Dies sollte es tun:

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

Ich finde das jQuery Select Box Manipulations Plugin nützlich für diese Art von Dingen.

Sie können ein Element einfach nach Index, Wert oder Regex entfernen.

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

Um alle Optionen zu entfernen, können Sie dies tun $("#myselect").removeOption(/./);.

Dynamisches Hinzufügen / Entfernen von Werten ohne Hardcode:

// Wert dynamisch aus Auswahl entfernen

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

// Dynamischen Wert zur Auswahl hinzufügen

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

Ich habe zwei Seiten gefunden, die hilfreich erscheinen. Sie sind für ASP.Net geschrieben, aber es sollte dasselbe gelten:

1. Hinzufügen / Entfernen von Elementen zu einer Dropdown-Liste mit jQuery
2. jQuery-Selektorausdrücke

Die folgenden Links sind hilfreich.

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

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

Um dies für alle zu verbessern, können Sie auch einfach:

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

und

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

Ich musste die erste Option aus einer Auswahl entfernen, ohne ID, nur eine Klasse, also habe ich diesen Code erfolgreich verwendet:

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

Ich möchte nur einen anderen Weg vorschlagen, um eine hinzuzufügen option. Anstatt das valueund textals Zeichenfolge festzulegen, kann man auch Folgendes tun:

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

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

Dies ist eine weniger fehleranfällige Lösung, wenn die Werte und Texte von Optionen dynamisch hinzugefügt werden.

Wenn jemand löschen muss ALLE Optionen innerhalb einer Auswahl , habe ich eine kleine Funktion ausgeführt.

Ich hoffe, Sie finden es nützlich

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

Muss nur rennen

removeAllOptionsSelect("#contenedor_modelos");

Dies ist Auswahlfeld 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>

Wenn Sie die Option vollständig aus dem Auswahlfeld entfernen und hinzufügen möchten, können Sie diesen Code verwenden

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

Manchmal müssen wir die Option im Auswahlfeld ausblenden und anzeigen, aber nicht entfernen, dann können Sie diesen Code verwenden

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

Irgendwann muss dann die ausgewählte Option aus dem Auswahlfeld entfernt werden

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

Wenn Sie alle Optionen entfernen müssen, dann diesen Code

('#selectBox').empty();

Wenn Sie die erste Option oder zuletzt diesen Code benötigen

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