Wie entferne ich alle Optionen eines Auswahlfelds, füge dann eine Option hinzu und wähle sie mit jQuery aus?

Question

Wie entferne ich mit Core-jQuery alle Optionen eines Auswahlfelds, füge dann eine Option hinzu und wähle sie aus?

Mein Auswahlfeld ist das Folgende.

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

BEARBEITEN:Der folgende Code war bei der Verkettung hilfreich.Allerdings (im Internet Explorer) .val('whatever') Die hinzugefügte Option wurde nicht ausgewählt.(Ich habe in beiden den gleichen „Wert“ verwendet .append Und .val.)

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

BEARBEITEN:Um diesen Code nachzuahmen, verwende ich den folgenden Code, wann immer die Seite/das Formular zurückgesetzt wird.Dieses Auswahlfeld wird mit einer Reihe von Optionsfeldern gefüllt. .focus() war näher, aber die Option schien nicht ausgewählt zu sein, wie es bei der Fall ist .selected= "true".An meinem vorhandenen Code stimmt nichts – 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 in etwa 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.

Answer 1

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

Answer 2

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

Answer 3

Warum nicht einfach einfaches Javascript verwenden?

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

Answer 4

Ich hatte einen Fehler in IE7 (funktioniert gut in IE6), bei dem die Verwendung der oben genannten jQuery-Methoden das löschen würde wählen im DOM, aber nicht auf dem Bildschirm.Mithilfe der IE Developer Toolbar konnte ich bestätigen, dass die wählen War ausgeräumt und hatte die neuen Artikel, aber optisch war das nicht der Fall wählen zeigte immer noch die alten Elemente an – obwohl man sie nicht auswählen konnte.

Die Lösung bestand darin, Standard-DOM-Methoden/-Eigenschaften (wie im Poster-Original verwendet) zum Löschen anstelle von jQuery zu verwenden – wobei weiterhin jQuery zum Hinzufügen von Optionen verwendet wurde.

$('#mySelect')[0].options.length = 0;

Answer 5

Wenn Ihr Ziel darin besteht, alle Optionen außer der ersten aus der Auswahl zu entfernen (normalerweise die Option „Bitte wählen Sie einen Artikel aus“), können Sie Folgendes verwenden:

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

Answer 6

Ich weiß nicht genau, was Sie mit „eins hinzufügen und auswählen“ meinen, da es sowieso standardmäßig ausgewählt wird.Wenn Sie jedoch mehr als eine hinzufügen würden, wäre es sinnvoller.Wie wäre es mit etwas wie:

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

Antwort auf „BEARBEITEN“:Können Sie klarstellen, was Sie mit „Dieses Auswahlfeld ist mit einer Reihe von Optionsfeldern gefüllt“ meinen?A <select> Element darf (rechtlich) nicht enthalten <input type="radio"> Elemente.

Answer 7

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

Answer 8

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

Answer 9

Dank der Antworten, die ich erhalten habe, konnte ich etwas wie das Folgende erstellen, das meinen Bedürfnissen entspricht.Meine Frage war etwas zweideutig.Vielen Dank fürs Weiterverfolgen.Mein letztes Problem wurde gelöst, indem ich „ausgewählt“ in die Option einfügte, 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>

Answer 10

1. Löschen Sie zunächst alle vorhandenen Optionen außer der ersten (--Select--)

2. Fügen Sie neue Optionswerte nacheinander mithilfe einer Schleife 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));
   }
   

Answer 11

Wie wäre es, wenn Sie einfach 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>
');

Answer 12

Ein anderer Weg:

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

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

Answer 13

Ich habe im Netz so etwas wie das Folgende gefunden.Mit Tausenden von Optionen wie in meiner Situation geht das viel schneller .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 Info Hier.

Answer 14

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 Option zum Hinzufügen bereits vorhanden wäre.

Answer 15

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

Die erste Codezeile entfernt alle Optionen eines Auswahlfelds, da keine Suchkriterien für Optionen erwähnt wurden.

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

Answer 16

Verwendet die JQuery Stütze() um die ausgewählte Option zu löschen

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

Answer 17

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

Answer 18

Sie können dies einfach tun, indem Sie HTML ersetzen

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

Answer 19

Ich hoffe, es wird funktionieren

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

Answer 20

• Speichern Sie die Optionswerte, die in einem Objekt angehängt werden sollen
• Vorhandene Optionen im Select-Tag löschen
• Iterieren Sie das Listenobjekt und hängen Sie den Inhalt an das vorgesehene Auswahltag 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>

Answer 21

Ich habe diesen Code in select2 gesehenhttps://select2.org/programmatic-control/add-select-clear-items#clearing-selections

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

Answer 22

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