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

Reiniger geben mir Like it

   let data= []

   let inp = $('#mySelect')
        inp.empty()

        data.forEach(el=> inp.append(  new Option(el.Nombre, el.Id) ))

Answer 2

• Speichern der Optionswerte, die in einem Objekt angehängt werden sollen
• vorhandene Optionen im Select-Tag löschen

• das Listenobjekt iterieren und den Inhalt an das vorgesehene Select-Tag anhängen

  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 3

Ich habe Vanilla-Javascript verwendet

let select = document.getElementById("mySelect");
select.innerHTML = "";

Answer 4

Hoffentlich klappt es

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

Answer 5

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