Wie entfernt man alle Optionen eines Auswahlfeldes und fügt dann eine Option hinzu und wählt sie mit jQuery aus?

Question

Mit Kern jQuery, wie Sie alle Optionen eines Auswahlfeldes zu entfernen, dann fügen Sie eine Option und wählen Sie es?

Meine Auswahlbox ist die folgende.

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

EDIT: Der folgende Code war bei der Verkettung hilfreich. Allerdings (im Internet Explorer) .val('whatever') die hinzugefügte Option nicht ausgewählt hat. (Ich habe in beiden Fällen denselben "Wert" verwendet .append y .val .)

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

EDIT: Versuchen, es zu bekommen, um diesen Code zu imitieren, verwende ich den folgenden Code, wenn die Seite/Formular zurückgesetzt wird. Dieses Auswahlfeld wird durch eine Reihe von Optionsfeldern ausgefüllt. .focus() war näher, aber die Option erschien nicht ausgewählt, wie es bei .selected= "true" . Nichts ist falsch mit meinem bestehenden Code - ich bin nur versuchen, 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";

EDIT: Die ausgewählte Antwort kam dem, was ich brauchte, sehr nahe. 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

Answer 1

Ich habe im Netz etwas gefunden wie unten. Bei tausenden von Optionen wie in meiner Situation ist das viel schneller als .empty() o .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 aquí .

Answer 2

$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');

In der ersten Codezeile werden alle Optionen eines Auswahlfeldes entfernt, da keine Suchkriterien für eine Option angegeben wurden.

Die zweite Codezeile fügt die Option mit dem angegebenen Wert("testValue") und Text("TestText") hinzu.

Answer 3

In Anlehnung an die Antwort von mauretto 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 dies verwenden:

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

Es wäre besser, wenn die Option, die hinzugefügt werden soll, bereits vorhanden wäre.

Answer 4

Eine andere Möglichkeit:

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

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

Answer 5

1. Löschen Sie zunächst alle vorhandenen Optionen mit Ausnahme der ersten (--Select--)

2. Neue Optionswerte in einer Schleife nacheinander anfügen

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