Wie entfernen Sie alle Optionen eines Auswahlfelds, fügen eine Option hinzu und wählen sie mit jQuery aus?

1077

Wie können Sie mit Core jQuery alle Optionen eines Auswahlfelds entfernen, dann eine Option hinzufügen und auswählen?

Mein Auswahlfeld ist das Folgende.

<Select id="mySelect" size="9"> </Select>

BEARBEITEN: Der folgende Code war hilfreich bei der Verkettung. (In Internet Explorer) .val('whatever')hat die hinzugefügte Option jedoch nicht ausgewählt. (Ich habe in beiden .appendund den gleichen 'Wert' verwendet .val.)

$('#mySelect').find('option').remove().end()
.append('<option value="whatever">text</option>').val('whatever');

BEARBEITEN: Beim Versuch, diesen Code nachzuahmen, verwende ich den folgenden Code, wenn die Seite / das Formular zurückgesetzt wird. Dieses Auswahlfeld wird mit einer Reihe von Optionsfeldern gefüllt. .focus()war näher, aber die Option wurde nicht wie bei ausgewählt ausgewählt .selected= "true". An meinem vorhandenen Code ist nichts falsch - ich versuche nur, jQuery zu lernen.

var mySelect = document.getElementById('mySelect');
mySelect.options.length = 0;
mySelect.options[0] = new Option ("Foo (only choice)", "Foo");
mySelect.options[0].selected="true";

BEARBEITEN: Die ausgewählte Antwort entsprach genau dem, was ich brauchte. Das hat bei mir funktioniert:

$('#mySelect').children().remove().end()
.append('<option selected value="whatever">text</option>') ;

Aber beide Antworten führten mich zu meiner endgültigen Lösung.

Jay Corbett
quelle

Antworten:

1695
$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;
Matt
quelle
3
@nickf: Ich habe das gleiche Problem, aber ich muss beim Ändern der Dropdown-Liste eine Reihe von Kontrollkästchen anstelle eines hinzufügen, aber meine Kontrollkästchen stammen aus XML. das funktioniert nicht
defau1t
10
Beachten Sie, dass Sie die Option / attr / text auch wie folgt aufteilen können:.append($("<option></option>").attr("value", '123').text('ABC!')
Brock Hensley
1
@BrockHensley, ich glaube, die wahre Eleganz dieser Antwort ist die richtige Verkettung in Kombination mit der Funktion end (). Ihr Vorschlag wird auch funktionieren. Aus der jQuery-API-Dokumentation: "Die meisten DOM-Traversal-Methoden von jQuery arbeiten mit einer jQuery-Objektinstanz und erzeugen eine neue, die einem anderen Satz von DOM-Elementen entspricht. In diesem Fall wird der neue Satz von Elementen auf einen Stapel verschoben Dies wird innerhalb des Objekts beibehalten. Jede aufeinanderfolgende Filtermethode schiebt einen neuen Elementsatz auf den Stapel. Wenn wir einen älteren Elementsatz benötigen, können wir end () verwenden, um die Sätze wieder vom Stapel zu entfernen. "
Anthony Mason
1
Nur so konnte ich mein Menü neu erstellen und die ausgewählte Option in jQuery Mobile auf PhoneGap für iOS ändern. Eine anschließende Aktualisierung des Menüs war ebenfalls erforderlich.
xited
3
@BrockHensley Sie könnten sogar so weit gehen wie.append($("<option></option>", {'value':'123'}).text('ABC!')
vahanpwns
710
$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;
Mahzilla
quelle
34
Ist "leer" aus Neugier schneller als "finden"? Scheint so, als ob es so wäre - weil der 'Fund' einen Selektor verwenden würde und 'leer' das Element nur brutal erzwingen würde.
Dan Esparza
52
@ DanEsparza Ich habe dich zu einem jsperf gemacht; empty()stellte sich natürlich schneller heraus;) jsperf.com/find-remove-vs-empty
vzwick
Ich habe einen seltsamen Fehler mit dieser Lösung. Der Teil zum Auffüllen ist in Ordnung, aber wenn ich versuche, einen Wert auszuwählen (in meinem Fall einen Tag), kann ich den Wert in der Konsole protokollieren, aber der im Auswahlfeld angezeigte Wert bleibt im ersten Wert 't lösen es nicht: /
Takács Zsolt
5
@ TakácsZsolt Vielleicht solltest du .val('whatever')am Ende der Kette ein hinzufügen , wie in Matts Antwort.
Kodos Johnson
.empty () funktioniert mit materialise, während .remove () nicht funktioniert hat
OverlordvI
127

Warum nicht einfach Javascript verwenden?

document.getElementById("selectID").options.length = 0;
Shawn
quelle
7
Ich bin damit einverstanden, dass dies die einfachste Lösung ist, um alle Optionen zu entfernen, aber das beantwortet nur die Hälfte der Frage ...
Elezar
2
Würde dies nicht zu einem Speicherverlust führen? Die Optionselemente sind jetzt nicht mehr zugänglich, werden aber weiterhin zugewiesen.
Synetech
1
Plain Old JS FTW (Für den Sieg) !!! :)
Raddevus
78

Wenn Sie alle Optionen außer der ersten (normalerweise die Option "Bitte wählen Sie einen Artikel aus") aus der Auswahl entfernen möchten, können Sie Folgendes verwenden:

$('#mySelect').find('option:not(:first)').remove();
Mauretto
quelle
10
Dies sollte die Antwort sein. Alle anderen haben den ersten absichtlich entfernt, um ihn später neu zu erstellen, was mir nicht gefällt. Dies bedeutet auch, dass sie die erste Option auch irgendwo zuerst gespeichert haben.
76

Ich hatte einen Fehler in IE7 (funktioniert gut in IE6), bei dem die Verwendung der obigen jQuery-Methoden die Auswahl im DOM löschte, aber nicht auf dem Bildschirm. Mit der IE Developer Toolbar konnte ich bestätigen, dass die Auswahl gelöscht wurde und die neuen Elemente enthielt, aber visuell die Auswahl immer noch die alten Elemente angezeigt - obwohl Sie sie nicht auswählen konnten.

Das Update bestand darin, Standard-DOM-Methoden / -Eigenschaften (wie im Poster-Original) zum Löschen anstelle von jQuery zu verwenden und weiterhin jQuery zum Hinzufügen von Optionen zu verwenden.

$('#mySelect')[0].options.length = 0;
row1
quelle
6
Ich musste diese Methode auch in ie6 verwenden, da .empty () dazu führte, dass mein Auswahlfeld, das in einem versteckten Container enthalten war, auch dann sichtbar wurde, wenn das übergeordnete Element ausgeblendet war.
Code Commander
2
Diese Methode erweist sich auch als ein kleines bisschen (ungefähr 1%) leistungsfähiger: jsperf.com/find-remove-vs-empty
vzwick
3
+1 Dies ist die am besten lesbare (meiner Meinung nach) und in jsPerf Link (@vzwick verlinkt) war die akzeptierte Antwort 34% langsamer (Opera 20)
Morvael
35

Sie wissen nicht genau, was Sie unter "Hinzufügen und Auswählen" verstehen, da es ohnehin standardmäßig ausgewählt wird. Wenn Sie jedoch mehr als eine hinzufügen würden, wäre dies sinnvoller. Wie wäre es mit so etwas wie:

$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();

Antwort auf "BEARBEITEN" : Können Sie klarstellen, was Sie unter "Dieses Auswahlfeld ist mit einer Reihe von Optionsfeldern gefüllt" meinen? Ein <select>Element kann (legal) keine <input type="radio">Elemente enthalten .

Bobby Jack
quelle
27
$('#mySelect')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;
Hayden Chambers
quelle
2
Wir verwenden immer noch IE6 und diese Methode hat nicht funktioniert. Es funktionierte jedoch in FF 3.5.6
Jay Corbett
3
Möglicherweise muss am Ende .change () hinzugefügt werden, um die Änderung von select
Hayden Chambers am
22
$("#control").html("<option selected=\"selected\">The Option...</option>");
jvarandas
quelle
12

Dank der Antworten, die ich erhalten habe, konnte ich Folgendes erstellen, das meinen Anforderungen entspricht. Meine Frage war etwas mehrdeutig. Vielen Dank für das Follow-up. Mein letztes Problem wurde gelöst, indem "ausgewählt" in die Option aufgenommen wurde, die ich auswählen wollte.

$(function() {
  $('#mySelect').children().remove().end().append('<option selected value="One">One option</option>') ; // clear the select box, then add one option which is selected
  $("input[name='myRadio']").filter( "[value='1']" ).attr( "checked", "checked" ); // select radio button with value 1
  // Bind click event to each radio button.
  $("input[name='myRadio']").bind("click",
                                  function() {
    switch(this.value) {
      case "1":
        $('#mySelect').find('option').remove().end().append('<option selected value="One">One option</option>') ;
        break ;
      case "2":
        $('#mySelect').find('option').remove() ;
        var items = ["Item1", "Item2", "Item3"] ; // Set locally for demo
        var options = '' ;
        for (var i = 0; i < items.length; i++) {
          if (i==0) {
            options += '<option selected value="' + items[i] + '">' + items[i] + '</option>';
          }
          else {
            options += '<option value="' + items[i] + '">' + items[i] + '</option>';
          }
        }
        $('#mySelect').html(options);   // Populate select box with array
        break ;
    } // Switch end
  } // Bind function end
                                 ); // bind end
}); // Event listener end
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>One<input  name="myRadio" type="radio" value="1"  /></label>
<label>Two<input name="myRadio"  type="radio" value="2" /></label>
<select id="mySelect" size="9"></select>

Jay Corbett
quelle
8

Wie wäre es, wenn Sie nur den HTML-Code in neue Daten ändern.

$('#mySelect').html('<option value="whatever">text</option>');

Ein anderes Beispiel:

$('#mySelect').html('
    <option value="1" selected>text1</option>
    <option value="2">text2</option>
    <option value="3" disabled>text3</option>
');
Shiv
quelle
8
  1. Löschen Sie zuerst alle vorhandenen Optionen und führen Sie die erste aus (- Select--)

  2. Fügen Sie neue Optionswerte mithilfe der Schleife nacheinander hinzu

    $('#ddlCustomer').find('option:not(:first)').remove();
    for (var i = 0; i < oResult.length; i++) {
       $("#ddlCustomer").append(new Option(oResult[i].CustomerName, oResult[i].CustomerID + '/' + oResult[i].ID));
    }
Jaydeep Shil
quelle
7

Ich habe im Netz so etwas wie unten gefunden. Mit Tausenden von Optionen wie in meiner Situation ist dies viel schneller als .empty()oder .find().remove()von jQuery.

var ClearOptionsFast = function(id) {
    var selectObj = document.getElementById(id);
    var selectParentNode = selectObj.parentNode;
    var newSelectObj = selectObj.cloneNode(false); // Make a shallow copy
    selectParentNode.replaceChild(newSelectObj, selectObj);
    return newSelectObj;
}

Mehr Infos hier .

Marioosh
quelle
7

Ein anderer Weg:

$('#select').empty().append($('<option>').text('---------').attr('value',''));

Unter diesem Link finden Sie bewährte Methoden: https://api.jquery.com/select/

Jhon Intriago Thoth
quelle
7
$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');

In der ersten Codezeile werden alle Optionen eines Auswahlfelds entfernt, da keine Kriterien für die Optionssuche erwähnt wurden.

In der zweiten Codezeile werden die Option mit dem angegebenen Wert ("testValue") und dem angegebenen Text ("TestText") hinzugefügt.

Dev Chauhan
quelle
Während dies die Frage beantworten kann, wäre es viel nützlicher, wenn Sie eine Erklärung geben würden, wie es sie beantwortet.
Nick
6

Aufbauend auf Maurettos Antwort ist dies etwas einfacher zu lesen und zu verstehen:

$('#mySelect').find('option').not(':first').remove();

Um alle Optionen außer einer mit einem bestimmten Wert zu entfernen, können Sie Folgendes verwenden:

$('#mySelect').find('option').not('[value=123]').remove();

Dies wäre besser, wenn die hinzuzufügende Option bereits vorhanden wäre.

Humbads
quelle
4

Verwendet die jquery prop () , um die ausgewählte Option zu löschen

$('#mySelect option:selected').prop('selected', false);
mehrdad
quelle
1
.prop () wird nur in jQuery 1.6+ wirksam. Verwenden Sie für jQuery 1.5- .attr ()
Agi Hammerthief
4

Dadurch wird Ihr vorhandenes mySelect durch ein neues mySelect ersetzt.

$('#mySelect').replaceWith('<Select id="mySelect" size="9">
   <option value="whatever" selected="selected" >text</option>
   </Select>');
Barun
quelle
4

Sie können dies einfach durch Ersetzen von HTML tun

$('#mySelect')
.html('<option value="whatever" selected>text</option>')
.trigger('change');
Nadeem Manzoor
quelle
4

Nur eine Zeile, um alle Optionen aus dem Auswahl-Tag zu entfernen. Nachdem Sie Optionen hinzugefügt haben, machen Sie eine zweite Zeile, um Optionen hinzuzufügen.

$('.ddlsl').empty();

$('.ddlsl').append(new Option('Select all', 'all'));
Kaushik Shrimali
quelle
2
  • Speichern Sie die Optionswerte, die an ein Objekt angehängt werden sollen
  • Löschen Sie vorhandene Optionen im Auswahl-Tag
  • Iterieren Sie das Listenobjekt und hängen Sie den Inhalt an das beabsichtigte Auswahl-Tag an

var listToAppend = {'':'Select Vehicle','mc': 'Motor Cyle', 'tr': 'Tricycle'};

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

$.each(listToAppend, function(val, text) {
    $('#selectID').append( new Option(text,val) );
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Nifemi Sola-Ojo
quelle
2

Ich habe diesen Code in Select2 - Clearing Selections gesehen

$('#mySelect').val(null).trigger('change');

Dieser Code funktioniert auch ohne Select2 gut mit jQuery

michael01angelo
quelle
1

Hoffe es wird funktionieren

$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));
Md. Russel Hussain
quelle
es funktioniert, wenn mehr als Option ich kann die zweite nicht auswählen
Anburaj_N
0
var select = $('#mySelect');
select.find('option').remove().end()
.append($('<option/>').val('').text('Select'));
var data = [{"id":1,"title":"Option one"}, {"id":2,"title":"Option two"}];
for(var i in data) {
    var d = data[i];
    var option = $('<option/>').val(d.id).text(d.title);
    select.append(option);
}
select.val('');
LN Nitharsan
quelle