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


Mit Core jQuery, wie entfernen Sie alle Optionen einer Auswahlbox, fügen Sie dann eine Option hinzu und wählen Sie sie aus?

Mein Auswahlfeld ist das Folgende.

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

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

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

BEARBEITEN: Um zu versuchen, diesen Code nachzuahmen, benutze ich den folgenden Code, wenn die Seite / das Formular zurückgesetzt wird. Diese Auswahlbox wird durch eine Reihe von Optionsfeldern gefüllt. .focus() war näher, aber die Option schien nicht ausgewählt wie mit .selected= "true". Nichts ist falsch mit meinem bestehenden Code - 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";

EDIT: ausgewählte Antwort war nahe, was ich brauchte. Das hat für mich funktioniert:

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

Aber beide Antworten führten mich zu meiner endgültigen Lösung ..


876
2017-09-06 20:53


Ursprung


Antworten:


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

1477
2017-09-06 21:01



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

616
2017-12-16 21:07



warum nicht einfach JavaScript verwenden?

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

102
2017-11-13 19:45



Ich hatte einen Fehler in IE7 (funktioniert in IE6), wo die Verwendung der obigen jQuery-Methoden deaktivieren würde wählen im DOM, aber nicht auf dem Bildschirm. Mit der IE Developer Toolbar konnte ich bestätigen, dass die wählen war abgeräumt worden und hatte die neuen Sachen, aber optisch die wählen zeigte immer noch die alten Gegenstände - obwohl Sie sie nicht auswählen konnten.

Der Fix bestand darin, Standard-DOM-Methoden / Eigenschaften (wie das Poster-Original) anstelle von jQuery zu verwenden - wobei jQuery immer noch verwendet wurde, um Optionen hinzuzufügen.

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

71
2018-01-11 09:22



Wenn es Ihr Ziel ist, alle Optionen außer der ersten Option aus der Auswahl zu entfernen (normalerweise die Option "Bitte wählen Sie einen Gegenstand"), können Sie Folgendes verwenden:

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

67
2018-03-27 09:56



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

23
2018-06-03 20:48



Nicht sicher, was genau du meinst, indem du "eins hinzufügen und auswählen" wählst, da es 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 "BEARBEITEN": Können Sie klarstellen, was Sie unter "Dieses Auswahlfeld enthält eine Reihe von Optionsfeldern" verstehen? Ein <select> -Element kann (legal) keine <input type = "radio"> -Elemente enthalten.


22
2017-09-08 18:51



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

19
2018-03-30 02:30



Dank der Antworten, die ich erhielt, konnte ich so etwas wie das Folgende erstellen, das meinen Bedürfnissen entspricht. Meine Frage war etwas mehrdeutig. Danke fürs Nachfassen. 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>


9
2017-09-09 22:04