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

Używając podstawowego jQuery, w jaki sposób usuwasz wszystkie opcje pola wyboru, a następnie dodajesz jedną opcję i ją wybierasz?

Moje pole wyboru jest następujące.

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

EDYCJA: Poniższy kod był pomocny w tworzeniu łańcuchów. Jednak (w Internet Explorerze) .val('whatever')nie wybrał dodanej opcji. (Zrobiłem używać tego samego „wartość” w obu .appenda .val).

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

EDYCJA: Próbując zmusić go do naśladowania tego kodu, używam następującego kodu za każdym razem, gdy strona / formularz jest resetowany. W tym polu wyboru znajduje się zestaw przycisków opcji. .focus()było bliżej, ale opcja nie wyglądała na wybraną tak jak w przypadku .selected= "true". W moim istniejącym kodzie nie ma nic złego - staram się tylko nauczyć jQuery.

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

EDYCJA: wybrana odpowiedź była zbliżona do tego, czego potrzebowałem. To dział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 ...

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

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

dlaczego nie użyć zwykłego javascript?

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

Jeśli Twoim celem jest usunięcie wszystkich opcji z zaznaczenia oprócz pierwszej (zazwyczaj opcji „Proszę wybrać element”), której możesz użyć:

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

Miałem błąd w IE7 (działa dobrze w IE6), gdzie użycie powyższych metod jQuery wyczyści zaznaczenie w DOM, ale nie na ekranie. Korzystanie z IE Developer Toolbar mogę potwierdzić, że wybierzesz zostały wyczyszczone i miał nowe elementy, ale wizualnie select wciąż pokazywało stare elementy - nawet jeśli nie można było ich wybrać.

Rozwiązaniem było użycie standardowych metod / właściwości DOM (tak jak miało to miejsce w oryginalnym plakacie) zamiast czyszczenia jQuery - nadal używając jQuery do dodawania opcji.

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

Nie jestem pewien, co dokładnie rozumiesz przez „dodaj i wybierz”, ponieważ i tak zostanie on domyślnie wybrany. Ale gdyby dodać więcej niż jeden, miałoby to większy sens. Co powiesz na coś takiego:

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

Odpowiedź na „EDYCJA” : Czy możesz wyjaśnić, co rozumiesz przez „To pole wyboru jest wypełnione zestawem przycisków opcji”? <select>Element może nie (prawnie) zawierają <input type="radio">elementy.

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

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

Dzięki otrzymanym odpowiedziom udało mi się stworzyć coś takiego, co odpowiada moim potrzebom. Moje pytanie było nieco dwuznaczne. Dzięki za kontynuację. Mój ostatni problem został rozwiązany poprzez włączenie „wybranego” do opcji, którą chciałem wybrać.

$(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>

Co powiesz na zmianę html na nowe dane?

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

Inny przykład:

$('#mySelect').html('
    <option value="1" selected>text1</option>
    <option value="2">text2</option>
    <option value="3" disabled>text3</option>
');

1. Najpierw wyczyść wszystkie istniejące opcje wykonaj pierwszą (- Wybierz--)

2. Dołącz nowe wartości opcji za pomocą pętli jedna po drugiej

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

Znalazłem w sieci coś jak poniżej. Z tysiącami opcji takich jak w mojej sytuacji jest to o wiele szybsze niż .empty()lub .find().remove()z 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;
}

Więcej informacji tutaj .

Inny sposób:

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

Pod tym linkiem znajdują się dobre praktyki https://api.jquery.com/select/

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

Pierwszy wiersz kodu usunie wszystkie opcje pola wyboru, ponieważ nie wymieniono kryteriów wyszukiwania opcji.

Drugi wiersz kodu doda opcję z określoną wartością („testValue”) i tekstem („TestText”).

Opierając się na odpowiedzi mauretto, jest to trochę łatwiejsze do odczytania i zrozumienia:

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

Aby usunąć wszystkie opcje oprócz jednej z określoną wartością, możesz użyć tego:

$('#mySelect').find('option').not('[value=123]').remove();

Byłoby lepiej, gdyby opcja dodawania była już dostępna.

Używa jquery prop (), aby wyczyścić wybraną opcję

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

Spowoduje to zastąpienie istniejącego mySelect nowym mySelect.

$('#mySelect').replaceWith('<Select id="mySelect" size="9">
   <option value="whatever" selected="selected" >text</option>
   </Select>');

Możesz to zrobić po prostu zastępując HTML

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

Tylko jeden wiersz, aby usunąć wszystkie opcje ze znacznika select, a po dodaniu dowolnych opcji utwórz drugi wiersz, aby dodać opcje.

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

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

• zapisz wartości opcji, które zostaną dołączone do obiektu
• wyczyść istniejące opcje w znaczniku wyboru
• iteruj obiekt listy i dołącz zawartość do zamierzonego znacznika wyboru

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>

Widziałem ten kod w Select2 - Usuwanie zaznaczeń

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

Ten kod działa dobrze z jQuery nawet bez Select2

Mam nadzieję, że to zadziała

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

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