Bir seçim kutusunun tüm seçeneklerini nasıl kaldırırsınız ve sonra bir seçenek ekleyip jQuery ile nasıl seçersiniz?

Core jQuery kullanarak, bir seçim kutusunun tüm seçeneklerini nasıl kaldırırsınız, sonra bir seçenek ekleyip seçersiniz?

Seçim kutum aşağıdaki.

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

EDIT: Aşağıdaki kod zincirleme ile yardımcı oldu. Ancak, (Internet Explorer'da) .val('whatever')eklenen seçeneği belirlemedi. (Her ikisi de, aynı 'değeri' kullandı .appendve .val.)

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

EDIT: Bu kodu taklit etmek için çalışırken, sayfa / form sıfırlandığında aşağıdaki kodu kullanın. Bu seçim kutusu bir dizi radyo düğmesi ile doldurulur. .focus()daha yakındı, ancak seçenek olduğu gibi seçili görünmedi .selected= "true". Mevcut kodumda hiçbir şey yanlış değil - sadece jQuery öğrenmeye çalışıyorum.

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

EDIT: seçilen cevap ihtiyacım olana yakındı. Bu benim için çalıştı:

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

Ama her iki cevap da beni son çözümüme götürdü.

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

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

neden sadece düz javascript kullanmıyorsunuz?

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

Hedefiniz ilk seçenek dışındaki seçeneklerden (genellikle 'Lütfen bir öğe seçin' seçeneği) tüm seçenekleri kaldırmaksa:

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

Yukarıdaki jQuery yöntemlerini kullanarak DOM seçim ekranda değil, IE7 (IE6 iyi çalışır) bir hata vardı . Araç bunu teyit olabilir IE Geliştirici kullanma seçeneğini temizlenir ve yeni öğeler vardı, ama görsel olarak olmuştu seçeneğini seçersiniz olamazdı rağmen - hala eski öğeleri gösterdi.

Düzeltme, jQuery yerine temizlemek için standart DOM yöntemlerini / özelliklerini (poster orijinalinde olduğu gibi) kullanmaktı - yine de seçenekler eklemek için jQuery kullanıyordu.

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

"Bir tane ekleyin ve seçin" ile tam olarak ne demek istediğinizden emin değilsiniz, çünkü zaten varsayılan olarak seçilecektir. Ancak, birden fazla eklemeniz daha mantıklı olurdu. Nasıl bir şey hakkında:

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

"DÜZENLE" yanıt : "Bu seçim kutusu bir dizi radyo düğmesi ile doldurulur" ile netleştirebilir misiniz? Bir <select>öğe (yasal olarak) <input type="radio">öğeler içeremez .

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

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

Aldığım cevaplar sayesinde, ihtiyaçlarıma uygun aşağıdaki gibi bir şey yaratabildim. Sorum biraz belirsizdi. Takip ettiğiniz için teşekkürler. Son sorunum, seçilmesini istediğim seçeneğe "seçildi" eklenerek çözüldü.

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

HTML'yi yeni verilere dönüştürmeye ne dersiniz?

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

Başka bir örnek:

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

1. Önce mevcut tüm seçeneği temizle ilkini yürüt (- Seç--)

2. Döngüyü tek tek kullanarak yeni seçenek değerleri ekleyin

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

İnternette aşağıdaki gibi bir şey buldum. Seçenekler binlerce benim durumda ister sayesinde bu çok daha hızlı olduğunu .empty()veya .find().remove()jQuery dan.

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;
}

Daha fazla bilgi burada .

Diğer yol:

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

Bu bağlantı altında, iyi uygulamalar var https://api.jquery.com/select/

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

İlk kod satırı, seçenek bulma ölçütlerinden bahsedilmediğinden, bir seçim kutusunun tüm seçeneklerini kaldıracaktır.

İkinci kod satırı, belirtilen değere ("testValue") ve Text ("TestText") seçeneğine ekler.

Mauretto'nun cevabına dayanarak, bu okumak ve anlamak biraz daha kolaydır:

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

Belirli bir değere sahip biri hariç tüm seçenekleri kaldırmak için şunu kullanabilirsiniz:

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

Eklenecek seçenek zaten mevcut olsaydı bu daha iyi olurdu.

Seçilen seçeneği temizlemek için jquery prop () yöntemini kullanır

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

Bu, mevcut mySelect'inizi yeni bir mySelect ile değiştirecektir.

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

HTML'yi değiştirerek kolayca yapabilirsiniz

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

Seçim etiketinden tüm seçenekleri kaldırmak için sadece bir satır ve herhangi bir seçenek ekledikten sonra seçenek eklemek için ikinci satır yapın.

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

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

• nesneye eklenecek seçenek değerlerini kaydetme
• seçim etiketindeki mevcut seçenekleri temizle
• liste nesnesini yineleyin ve içeriği istenen seçim etiketine ekleyin

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>

Ben bu kodu Select2 - Temizleme Seçimleri'nde gördüm

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

Bu kod Select2 olmadan bile jQuery ile iyi çalışır

Umarım işe yarar

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