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 bin mir nicht ganz sicher, was Sie mit "einen hinzufügen und auswählen" meinen, da er ohnehin standardmäßig ausgewählt wird. Aber wenn Sie mehr als einen 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 "EDIT" : Können Sie erläutern, was Sie mit "Dieses Auswahlfeld wird durch eine Reihe von Optionsfeldern ausgefüllt" meinen? A <select> Element kann (rechtlich) nicht enthalten <input type="radio"> Elemente.

Answer 2

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

Answer 3

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

Answer 4

Nur eine Zeile, um alle Optionen aus dem Select-Tag zu entfernen, und nachdem Sie Optionen hinzufügen können, machen Sie eine zweite Zeile, um Optionen hinzuzufügen.

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

$('.ddlsl').append(new Option('Select all', 'all'));

Ein weiterer kurzer Weg, der aber nicht versucht wurde

$('.ddlsl').empty().append(new Option('Select all', 'all'));

Answer 5

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