Entfernen eines Elements aus einem Auswahlfeld

269

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

Antworten:

491

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>

dsimard
quelle
7
Wenn Sie eine Option entfernen und eine andere auswählen müssen: $ ('# selectBox'). Val ('option2'). Find ('option [value = "option1"]'). Remove ();
Radu Maris
8
Ehrlich gesagt denke ich, dass die Art und Weise, wie Auswahlfelder über Javascript manipuliert werden, eines der verwirrendsten Dinge überhaupt ist, selbst wenn Sie ein einigermaßen gutes Verständnis für Selektoren und das DOM haben.
Tacroy
79

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.

Etienne Dupuis
quelle
Es entfernt alles für mich ... Warten Sie, ich verwende Select mit mehreren Attributen. Wie kann ich es aus Multiple Select entfernen?
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;    
}

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.

Adriana
quelle
4
@JBeckton: Rückblick auf dieses vor 4 Jahren geschriebene Ich lache über mich selbst und Sie haben Recht :)
Adriana
25

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(); 
Usman Shaukat
quelle
20

Dies sollte es tun:

$('#selectBox').empty();
qwe
quelle
18

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

Zoredache
quelle
5
-1, da dies ohne Plugin mit jQuery und grundlegender Programmierung möglich ist.
Slopeside Creative
ᕀ 1 warum das Rad neu erfinden
John Hascall
9

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>');
Muru Bakthavachalam
quelle
5

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

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

und

$("#selectBox option[value='option1']").show();
AA11oAKas
quelle
Ich denke, das hängt vom Browser ab. Diese bestimmte Option wird möglicherweise nur deaktiviert.
Adam Ware
Ich empfehle diese Methode nicht, da sie browserspezifisch ist.
Scott Shaw-Smith
Dies ist ein alter Beitrag, aber ich möchte dies kommentieren. Obwohl dies eine sehr gute Möglichkeit ist, mit der Auswahloption umzugehen, wird sie nicht empfohlen, da der IE sie nicht unterstützt
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>

Jack
quelle
2

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();
user3027485
quelle
0

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.

polkduran
quelle
Ich bin nicht der Downvoter, aber es scheint, dass Sie OP auf halbem Weg mit dem Hinzufügen einer Option beantwortet haben, aber nicht mit dem Entfernen einer Option.
John Odom
0

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");
daronwolff
quelle
2
Ist das Ergebnis nicht gleich $('#contenedor_modelos').empty();? Schön, etwas Action zu sehen :)
MineSweeper
0

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();
Shafiqul Islam
quelle