web-dev-qa-db-de.com

Ein Element aus einem Auswahlfeld entfernen

Wie entferne ich Elemente aus einem Auswahlfeld oder füge ich Elemente hinzu? Ich verwende jQuery, sollte das die Aufgabe erleichtern. Nachfolgend finden Sie ein Beispiel für ein Auswahlfeld.

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

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>

Option hinzufügen:

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

Sie können das ausgewählte Element damit löschen:

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

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

77
Etienne Dupuis
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 das Element hinzuzufügen, würde ich eine zweite Auswahlbox 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.

27
Adriana

So entfernen Sie ein Element

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

Einen Artikel hinzufügen

$("#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(); 
22
Usman Shaukat

Das sollte es tun:

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

Ich finde das jQuery select box manipulation plugin nützlich für diese Art von Dingen.

Sie können ein Element leicht 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 $("#myselect").removeOption(/./); ausführen.

18
Zoredache

Wert dynamisch hinzufügen/entfernen ohne Hard-Code:

// Wert dynamisch aus select entfernen

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

// Dynamischen Wert zur Auswahl hinzufügen

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

Ich habe zwei Seiten gefunden, die hilfreich erscheinen, sie sind für ASP.Net geschrieben, aber das gleiche sollte zutreffen:

  1. So fügen Sie Elemente mit jQuery aus einer Dropdown-Liste hinzu
  2. jQuery-Selektorausdrücke
8
Zachary Yates

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

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

und

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

Die folgenden Links werden hilfreich sein

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

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

5
Anjuman

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>

4
Ja͢ck

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

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

Ich möchte nur eine andere Möglichkeit vorschlagen, eine option..__ hinzuzufügen. Anstatt value und text als String festzulegen, können Sie auch Folgendes tun:

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

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

Dies ist eine weniger fehleranfällige Lösung, wenn Sie die Werte und Texte der Optionen dynamisch hinzufügen. 

0
polkduran

Wenn jemand die Optionen "deleteALL" innerhalb eines select-Objekts benötigt, habe ich eine kleine Funktion ausgeführt.

Ich hoffe du findest 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 laufen 

removeAllOptionsSelect("#contenedor_modelos");
0
daronwolff

dies ist die Auswahlbox 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 aus dem Auswahlfeld ausblenden und anzeigen, aber nicht entfernen, dann können Sie diesen Code verwenden

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

manchmal müssen Sie dann die ausgewählte Option aus dem Auswahlfeld entfernen

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

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

('#selectBox').empty();

wenn nötig, erste Option oder zuletzt diesen Code

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