Jak usunąć wszystkie opcje z pola wyboru, a następnie dodać jedną opcję i wybrać ją za pomocą jQuery?

Używając rdzenia jQuery, jak usunąć wszystkie opcje pola wyboru, a następnie dodać jedną opcję i wybrać ją?

Moje pole wyboru jest następujące.

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

EDIT: Poniższy kod był pomocny przy tworzeniu łańcucha. Jednakże, (w Internet Explorer) .val('whatever') nie wybrał opcji, która została dodana. (Używałem tej samej 'wartości' zarówno w .append jak i .val).

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

EDYTOWAĆ: Próbując uzyskać to, aby naśladować ten kod, używam następującego kodu za każdym razem, gdy strona / formularz jest resetowany. To pole wyboru jest zaludnione przez zestaw przycisków radiowych. .focus() był bliżej, ale opcja nie pojawiła się wybrana, jak to się dzieje z .selected= "true". Nic nie jest nie tak z moim istniejącym kodem - po prostu próbuję nauczyć się jQuery.

var mySelect = document.getElementById('mySelect');
mySelect.options.length = 0;
mySelect.options[0] = new Option ("Foo (only choice)", "Foo");
mySelect.options[0].selected="true";

EDIT: wybrana odpowiedź była bliska temu, czego potrzebowałem. To zadziałało dla mnie:

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

Ale obie odpowiedzi doprowadziły mnie do mojego ostatecznego rozwiązania...

Reinstate Monica
Edytowane pytanie 26. września 2019 в 5:34
Programowanie
javascript jquery html-select option
6. września 2008 в 8:53
34 opinie
Rozwiązanie
$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('text')
    .val('whatever')
;
nickf
Edytowana odpowiedź 17. października 2008 в 2:25
Komentarze (8)

Nie jestem pewien, co dokładnie masz na myśli mówiąc "dodaj jeden i wybierz go", ponieważ i tak zostanie on domyślnie wybrany. Ale jeśli miałbyś dodać więcej niż jeden, miałoby to więcej sensu. Co powiesz na coś w stylu:

$('select').children().remove();
$('select').append('foo');
$('#foo').focus();

Response to "EDIT": Czy możesz wyjaśnić, co masz na myśli mówiąc "To pole wyboru jest wypełnione zestawem przycisków radiowych"? Element <select> nie może (legalnie) zawierać elementów <input type="radio">.

Heemanshu Bhalla
Edytowana odpowiedź 5. stycznia 2019 в 10:33
Komentarze (0)

Dzięki odpowiedziom, które otrzymałem, udało mi się stworzyć coś takiego jak poniżej, co odpowiada moim potrzebom. Moje pytanie było nieco niejednoznaczne. Dziękuję za śledzenie. Mój ostateczny problem został rozwiązany przez włączenie "selected" do opcji, którą chciałem wybrać.

$(function() {
  $('#mySelect').children().remove().end().append('One 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('One 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 += '' + items[i] + '';
          }
          else {
            options += '' + items[i] + '';
          }
        }
        $('#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>
One<input  name="myRadio" type="radio" value="1"  />
Two<input name="myRadio"  type="radio" value="2" />
<select id="mySelect" size="9">
Al Foиce ѫ
Edytowana odpowiedź 24. sierpnia 2016 в 11:41
Komentarze (0)