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

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

Dlaczego po prostu nie używać zwykłego javascript?

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

Miałem błąd w IE7 (działa dobrze w IE6), gdzie użycie powyższych metod jQuery wyczyściłoby select w DOM, ale nie na ekranie. Korzystając z paska narzędzi programisty IE mogłem potwierdzić, że select zostało wyczyszczone i zawiera nowe elementy, ale wizualnie select nadal pokazuje stare elementy - nawet jeśli nie można ich zaznaczyć.

Poprawka polegała na użyciu standardowych metod DOM/properites (jak oryginał plakatu), aby wyczyścić, a nie jQuery - nadal używając jQuery do dodawania opcji.

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

Jeśli twoim celem jest usunięcie wszystkich opcji z select z wyjątkiem pierwszej (zazwyczaj opcji "proszę wybrać element"), możesz użyć:

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

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

Nie wiem dokładnie, co masz na myśli przez "Dodaj i wybierz", ponieważ i tak będzie wybrana domyślnie. Ale jeśli dodałbyś więcej niż jeden, to miałoby to więcej sensu. A może coś w stylu:

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

Odpowiedź na"Edytuj" : czy możesz wyjaśnić, co masz na myśli przez "to pole wyboru jest wypełnione zestawem przycisków radiowych"? Element nie może (prawnie) zawierać elementów .

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

Dzięki odpowiedziom, które otrzymałam, udało mi się stworzyć coś takiego jak poniżej, co odpowiada moim potrzebom. Moje pytanie było niejednoznaczne. Dzięki za śledzenie. Mój ostatni problem został rozwiązany poprzez włączenie "selected" w 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>

1. Najpierw wyczyść wszystkie exisiting opcja execpt pierwsza (--Select--)

2. Dodawanie nowych wartości opcji za pomocą pętli jeden po drugim

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

Może po prostu zmienimy 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>
');

Inny sposób:

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

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

Znalazłem w sieci coś takiego jak poniżej. Z tysiącami opcji jak w mojej sytuacji jest to o wiele szybsze niż .empty() lub {[2] } 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 .

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

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

Aby usunąć wszystkie opcje z wyjątkiem jednej o określonej wartości, możesz użyć tego:

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

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

Spowoduje zastąpienie istniejącego programu mySelect nowym programem 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');

Używa jQuery prop () aby wyczyścić zaznaczoną opcję

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

Hope it will work

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

• Zapisz wartości opcji do dodania w obiekcie
• Wyczyść istniejące opcje w znaczniku select
• iteracja obiektu list i dołączenie zawartości do zamierzonego znacznika select

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>

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

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

Pierwsza linia kodu usunie wszystkie opcje pola wyboru, ponieważ nie wspomniano o opcji Znajdź kryteria.

Druga linia kodu doda opcję o podanej wartości ("testValue") oraz tekst ("TestText").