Bagaimana Anda menghapus semua opsi dari kotak pilih dan kemudian menambahkan satu opsi dan memilihnya dengan jQuery?

1077

Menggunakan core jQuery, bagaimana Anda menghapus semua opsi dari kotak pilih, kemudian menambahkan satu opsi dan memilihnya?

Kotak pilih saya adalah sebagai berikut.

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

SUNTING: Kode berikut membantu merantai. Namun, (di Internet Explorer) .val('whatever')tidak memilih opsi yang ditambahkan. (Saya memang menggunakan 'nilai' yang sama di keduanya .appenddan .val.)

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

EDIT: Mencoba membuatnya meniru kode ini, saya menggunakan kode berikut ini setiap kali halaman / formulir diatur ulang. Kotak pilih ini diisi oleh satu set tombol radio. .focus()lebih dekat, tetapi opsi tidak muncul dipilih seperti halnya dengan .selected= "true". Tidak ada yang salah dengan kode saya yang ada - Saya hanya mencoba belajar 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: jawaban yang dipilih dekat dengan apa yang saya butuhkan. Ini bekerja untuk saya:

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

Namun kedua jawaban itu menuntun saya ke solusi akhir saya ..

Jay Corbett
sumber

Jawaban:

1695
$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;
Mat
sumber
3
@nickf: Saya memiliki masalah yang sama, tetapi saya perlu menambahkan satu set kotak centang daripada satu pada perubahan dropdown tetapi kotak centang saya berasal dari xml. ini tidak berhasil
defau1t
10
Catatan Anda juga bisa memecah opsi / attr / teks seperti:.append($("<option></option>").attr("value", '123').text('ABC!')
Brock Hensley
1
@ RockHensley, saya percaya keanggunan sebenarnya dari jawaban ini adalah rantai yang tepat dalam kombo dengan fungsi end (). Saran Anda akan bekerja juga. Dari Dokumentasi API jQuery: "Sebagian besar metode traversal DOM jQuery beroperasi pada instance objek jQuery dan menghasilkan yang baru, cocok dengan sekumpulan elemen DOM yang berbeda. Ketika ini terjadi, seolah-olah set elemen baru didorong ke tumpukan yang dipertahankan di dalam objek. Setiap metode pemfilteran berurutan mendorong set elemen baru ke stack. Jika kita membutuhkan set elemen yang lebih lama, kita dapat menggunakan end () untuk menghapus set set kembali dari stack. "
Anthony Mason
1
ini adalah satu-satunya cara saya dapat membangun kembali menu saya dan mengubah opsi yang dipilih di jQuery Mobile di PhoneGap untuk iOS. Refreshing menu sesudahnya juga diperlukan.
xited
3
@ RockHensley Anda bahkan bisa pergi sejauh.append($("<option></option>", {'value':'123'}).text('ABC!')
vahanpwns
710
$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;
Mahzilla
sumber
34
Hanya karena penasaran, apakah 'kosong' lebih cepat dari 'temukan'? Sepertinya itu akan - karena 'menemukan' akan menggunakan pemilih dan 'kosong' hanya akan memaksa paksa mengosongkan elemen.
Dan Esparza
52
@ DanEsparza saya membuat Anda jsperf; empty()ternyata lebih cepat tentu saja;) jsperf.com/find-remove-vs-empty
vzwick
Saya mendapat kesalahan aneh dengan solusi ini. Bagian mengisi tidak apa-apa, tetapi ketika saya mencoba untuk memilih nilai (dalam kasus saya sehari), saya dapat konsol mencatat nilai, tetapi nilai yang ditampilkan di bidang pilih tetap di nilai pertama .... Saya bisa dapat menyelesaikannya: /
Takács Zsolt
5
@ TakácsZsolt Mungkin Anda harus menambahkan a .val('whatever')di akhir rantai seperti pada jawaban Matt.
Kodos Johnson
.empty () berfungsi dengan terwujud, sedangkan .remove () tidak bekerja
OverlordvI
127

mengapa tidak menggunakan javascript biasa?

document.getElementById("selectID").options.length = 0;
Shawn
sumber
7
Saya setuju bahwa ini adalah solusi paling sederhana untuk menghapus semua opsi, tetapi itu hanya menjawab setengah dari pertanyaan ...
Elezar
2
Bukankah ini akan membuat kebocoran memori? Elemen opsi sekarang tidak dapat diakses tetapi masih dialokasikan.
Synetech
1
JS Old JSW Biasa (Untuk Menang) !!! :)
raddevus
78

Jika tujuan Anda adalah untuk menghapus semua opsi dari yang dipilih kecuali yang pertama (biasanya opsi 'Silakan pilih item') Anda dapat menggunakan:

$('#mySelect').find('option:not(:first)').remove();
mauretto
sumber
10
Ini seharusnya jawabannya. Semua yang lain dengan sengaja menghapus yang pertama dengan maksud untuk membuatnya kembali setelah itu, yang saya tidak suka; itu juga menyiratkan bahwa mereka telah menyimpan opsi pertama di suatu tempat pertama juga.
76

Saya punya bug di IE7 (berfungsi dengan baik di IE6) di mana menggunakan metode jQuery di atas akan menghapus pilih di DOM tetapi tidak di layar. Menggunakan IE Developer Toolbar saya dapat mengkonfirmasi bahwa pilih telah dihapus dan item baru, tetapi secara visual pilih masih menunjukkan item lama - meskipun Anda tidak dapat memilihnya.

Cara mengatasinya adalah dengan menggunakan metode / properites DOM standar (seperti yang dimiliki poster asli) untuk menghapus daripada jQuery - masih menggunakan jQuery untuk menambahkan opsi.

$('#mySelect')[0].options.length = 0;
row1
sumber
6
Saya harus menggunakan metode ini di ie6 juga karena .empty () menyebabkan kotak pilih saya yang terkandung dalam wadah tersembunyi menjadi terlihat bahkan ketika orang tua disembunyikan.
Komandan Kode
2
Metode ini juga ternyata sedikit (sekitar 1%) lebih banyak performant: jsperf.com/find-remove-vs-empty
vzwick
3
+1 ini adalah yang paling mudah dibaca (menurut saya) dan di tautan jsPerf (@vzwick ditautkan) jawaban yang diterima adalah 34% lebih lambat (Opera 20)
Morvael
35

Tidak yakin persis apa yang Anda maksud dengan "tambahkan satu dan pilih", karena akan tetap dipilih secara default. Tetapi, jika Anda menambahkan lebih dari satu, itu akan lebih masuk akal. Bagaimana dengan sesuatu seperti:

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

Tanggapan untuk "EDIT" : Dapatkah Anda mengklarifikasi apa yang Anda maksud dengan "Kotak pilih ini diisi oleh seperangkat tombol radio"? Suatu <select>elemen tidak dapat (secara hukum) mengandung <input type="radio">elemen.

Bobby Jack
sumber
27
$('#mySelect')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;
Hayden Chambers
sumber
2
Kami masih menggunakan IE6 dan metode ini tidak berhasil. Namun, itu berhasil di FF 3.5.6
Jay Corbett
3
mungkin harus menambahkan .change () di bagian akhir untuk memicu perubahan pilih
Hayden Chambers
22
$("#control").html("<option selected=\"selected\">The Option...</option>");
jvaranda
sumber
12

Berkat jawaban yang saya terima, saya dapat membuat sesuatu seperti yang berikut, yang sesuai dengan kebutuhan saya. Pertanyaan saya agak ambigu. Terima kasih telah menindaklanjuti. Masalah terakhir saya diselesaikan dengan memasukkan "terpilih" dalam opsi yang ingin saya pilih.

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

Jay Corbett
sumber
8

Bagaimana kalau hanya mengubah html ke data baru.

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

Contoh lain:

$('#mySelect').html('
    <option value="1" selected>text1</option>
    <option value="2">text2</option>
    <option value="3" disabled>text3</option>
');
Pisau
sumber
8
  1. Pertama hapus semua opsi yang ada, lakukan yang pertama (- Pilih--)

  2. Tambahkan nilai opsi baru menggunakan loop satu per satu

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

Saya telah menemukan sesuatu di internet seperti di bawah ini. Dengan ribuan opsi seperti dalam situasi saya ini jauh lebih cepat daripada .empty()atau .find().remove()dari 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;
}

Info lebih lanjut di sini .

marioosh
sumber
7

Cara lain:

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

Di bawah tautan ini, ada praktik baik https://api.jquery.com/select/

Jhon Intriago Thoth
sumber
7
$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');

Baris kode pertama akan menghapus semua opsi dari kotak pilih karena tidak ada opsi menemukan kriteria yang disebutkan.

Baris kode kedua akan menambahkan Opsi dengan nilai yang ditentukan ("testValue") dan Teks ("TestText").

Dev Chauhan
sumber
Meskipun ini dapat menjawab pertanyaan, akan jauh lebih bermanfaat jika Anda memberikan penjelasan bagaimana menjawabnya.
Nick
6

Berdasarkan jawaban mauretto, ini sedikit lebih mudah dibaca dan dipahami:

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

Untuk menghapus semua opsi kecuali satu dengan nilai tertentu, Anda dapat menggunakan ini:

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

Ini akan lebih baik jika opsi yang akan ditambahkan sudah ada.

humbad
sumber
4

Menggunakan jquery prop () untuk menghapus opsi yang dipilih

$('#mySelect option:selected').prop('selected', false);
mehrdad
sumber
1
.prop () hanya berlaku di jQuery 1.6+. Untuk jQuery 1.5-, gunakan .attr ()
Agi Hammerthief
4

Ini akan menggantikan mySelect yang ada dengan mySelect baru.

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

Anda dapat melakukannya hanya dengan mengganti html

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

Hanya satu baris untuk menghapus semua opsi dari tag pilih dan setelah Anda dapat menambahkan opsi apa pun kemudian buat baris kedua untuk menambahkan opsi.

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

$('.ddlsl').append(new Option('Select all', 'all'));
Kaushik shrimali
sumber
2
  • simpan nilai opsi untuk ditambahkan dalam suatu objek
  • hapus opsi yang ada di tag pilih
  • ulangi objek daftar dan tambahkan konten ke tag pilih yang dimaksud

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>

Nifemi Sola-Ojo
sumber
2

Saya melihat kode ini di Select2 - Kliring Seleksi

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

Kode ini berfungsi baik dengan jQuery bahkan tanpa Select2

michael01angelo
sumber
1

Semoga ini akan berhasil

$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));
Nyonya Russel Hussain
sumber
ini berfungsi jika lebih dari opsi saya tidak dapat memilih yang kedua
Anburaj_N
0
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('');
LN Nitharsan
sumber