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

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.

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

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

Warum nicht einfach Javascript verwenden?

document.getElementById("selectID").options.length = 0;

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

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;

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 .

$('#mySelect')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;

$("#control").html("<option selected=\"selected\">The Option...</option>");

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>

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>
');

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

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 .

Ein anderer Weg:

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

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

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

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.

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

$('#mySelect option:selected').prop('selected', false);

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>');

Sie können dies einfach durch Ersetzen von HTML tun

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

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'));

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

Ich habe diesen Code in Select2 - Clearing Selections gesehen

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

Dieser Code funktioniert auch ohne Select2 gut mit jQuery

Hoffe es wird funktionieren

$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));

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