Menghapus item dari kotak pilih


269

Bagaimana cara menghapus item dari, atau menambahkan item ke, kotak pilih? Saya menjalankan jQuery, jika itu membuat tugas lebih mudah. Di bawah ini adalah contoh kotak pilih.

<select name="selectBox" id="selectBox">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>    
</select>

Jawaban:


491

Hapus satu opsi:

$("#selectBox option[value='option1']").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectBox" id="selectBox">
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>	
</select>

Tambahkan opsi:

$("#selectBox").append('<option value="option5">option5</option>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectBox" id="selectBox">
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>	
</select>


7
Jika Anda perlu menghapus opsi dan memilih yang lain: $ ('# selectBox'). Val ('option2'). Find ('option [value = "option1"]'). Remove ();
Radu Maris

8
Jujur, saya pikir cara kotak pilih dimanipulasi melalui javascript adalah salah satu hal yang paling membingungkan, bahkan ketika Anda memiliki pemahaman yang cukup baik tentang penyeleksi dan DOM.
Tacroy

79

Anda dapat menghapus item yang dipilih dengan ini:

$("#selectBox option:selected").remove();

Ini berguna jika Anda memiliki daftar dan bukan dropdown.


Itu menghapus semuanya untuk saya ... Tunggu saya menggunakan Pilih dengan beberapa atribut. Bagaimana saya bisa menghapusnya dari beberapa pilih?
Akshay

27
window.onload = function ()
{   
    var select = document.getElementById('selectBox');
    var delButton = document.getElementById('delete');

    function remove()
    {
        value = select.selectedIndex;
        select.removeChild(select[value]);
    }

    delButton.onclick = remove;    
}

Untuk menambahkan item saya akan membuat kotak pilih kedua dan:

var select2 = document.getElementById('selectBox2');
var addSelect = document.getElementById('addSelect');

function add()
{
    value1 = select2.selectedIndex;
    select.appendChild(select2[value1]);    
}

addSelect.onclick = add;

Bukan jQuery.


4
@JBeckton: melihat kembali pada tulisan ini 4 tahun yang lalu saya menertawakan diri sendiri dan Anda benar :)
Adriana

25

Untuk Menghapus Item

$("select#mySelect option[value='option1']").remove(); 

Untuk menambahkan item

$("#mySelect").append('<option value="option1">Option</option>');

Untuk memeriksa opsi

$('#yourSelect option[value=yourValue]').length > 0;

Untuk menghapus opsi yang dipilih

$('#mySelect :selected').remove(); 

20

Ini harus dilakukan:

$('#selectBox').empty();

18

Saya menemukan plugin manipulasi kotak pilih jQuery berguna untuk hal semacam ini.

Anda dapat dengan mudah menghapus item berdasarkan indeks, nilai, atau regex.

removeOption(index/value/regex/array[, selectedOnly])

Remove an option by
- index: $("#myselect2").removeOption(0);
- value: $("#myselect").removeOption("Value");
- regular expression: $("#myselect").removeOption(/^val/i);
- array $("#myselect").removeOption(["myselect_1", "myselect_2"]);

Untuk menghapus semua opsi, Anda bisa melakukannya $("#myselect").removeOption(/./);.


5
-1 karena ini dapat dilakukan tanpa plugin menggunakan jQuery dan pemrograman dasar.
Slopeide Creative

ᕀ 1 mengapa menciptakan kembali roda
John Hascall

9

Menambah / Menghapus nilai secara dinamis tanpa kode keras:

// hapus nilai dari pilih secara dinamis

$("#id-select option[value='" + dynamicVal + "']").remove();

// Tambahkan nilai dinamis untuk dipilih

$("#id-select").append('<option value="' + dynamicVal + '">' + dynamicVal + '</option>');



5

Hanya untuk menambah ini bagi siapa pun yang mencari, Anda juga dapat hanya:

$("#selectBox option[value='option1']").hide();

dan

$("#selectBox option[value='option1']").show();

Saya pikir ini bervariasi tergantung pada browser. Mungkin saja menonaktifkan opsi tertentu.
Adam Ware

Saya tidak merekomendasikan metode ini, karena khusus browser.
Scott Shaw-Smith

Ini adalah posting lama tetapi saya ingin mengomentari ini. Meskipun ini adalah cara yang sangat bagus untuk berurusan dengan opsi pilih, tidak dianjurkan karena IE tidak mendukungnya
Ahmed Ali

4

JavaScript

function removeOptionsByValue(selectBox, value)
{
  for (var i = selectBox.length - 1; i >= 0; --i) {
    if (selectBox[i].value == value) {
      selectBox.remove(i);
    }
  }
}

function addOption(selectBox, text, value, selected)
{
  selectBox.add(new Option(text, value || '', false, selected || false));
}

var selectBox = document.getElementById('selectBox');

removeOptionsByValue(selectBox, 'option3');
addOption(selectBox, 'option5', 'option5', true);
<select name="selectBox" id="selectBox">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>	
</select>

jQuery

jQuery(function($) {
  $.fn.extend({
    remove_options: function(value) {
      return this.each(function() {
        $('> option', this)
          .filter(function() {
            return this.value == value;
          })
          .remove();
      });
    },
    add_option: function(text, value, selected) {
      return this.each(function() {
        $(this).append(new Option(text, value || '', false, selected || false));
      });
    }
  });
});

jQuery(function($) {
  $('#selectBox')
    .remove_options('option3')
    .add_option('option5', 'option5', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectBox" id="selectBox">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>	
</select>


2

Saya harus menghapus opsi pertama dari pilih, tanpa ID, hanya kelas, jadi saya berhasil menggunakan kode ini:

$('select.validation').find('option:first').remove();

0

Saya hanya ingin menyarankan cara lain untuk menambahkan option. Alih-alih mengatur valuedan textsebagai string, seseorang juga dapat melakukannya:

var option = $('<option/>')
                  .val('option5')
                  .text('option5');

$('#selectBox').append(option);

Ini adalah solusi yang kurang rawan kesalahan saat menambahkan nilai dan teks opsi secara dinamis.


Saya bukan downvoter tetapi tampaknya Anda menjawab OP setengah jalan dengan cara menambahkan opsi, tetapi bukan cara menghapus opsi.
John Odom

0

Jika seseorang perlu menghapus SEMUA opsi di dalam pilih, saya melakukan fungsi litle.

Saya harap Anda menemukannya bermanfaat

var removeAllOptionsSelect = function(element_class_or_id){
    var element = $(element_class_or_id+" option");
    $.each(element,function(i,v){
        value = v.value;
        $(element_class_or_id+" option[value="+value+"]").remove(); 
    })
}

Hanya harus berlari

removeAllOptionsSelect("#contenedor_modelos");

2
Bukankah hasilnya sama dengan $('#contenedor_modelos').empty();? Senang melihat beberapa tindakan :)
MineSweeper

0

ini pilih kotak html

<select name="selectBox" id="selectBox">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>    
</select>

ketika Anda ingin benar-benar menghapus dan menambahkan opsi dari kotak pilih maka Anda dapat menggunakan kode ini

$("#selectBox option[value='option1']").remove();
$("#selectBox").append('<option value="option1">Option</option>');

kadang-kadang kita perlu menyembunyikan dan menampilkan opsi dari kotak pilih, tetapi tidak menghapus maka Anda dapat menggunakan kode ini

 $("#selectBox option[value='option1']").hide();
 $("#selectBox option[value='option1']").show();

kadang-kadang perlu menghapus opsi yang dipilih dari kotak pilih kemudian

$('#selectBox :selected').remove();
$("#selectBox option:selected").remove();

ketika Anda perlu menghapus semua opsi maka kode ini

('#selectBox').empty();

ketika perlu opsi pertama atau terakhir maka kode ini

$('#selectBox').find('option:first').remove();
$('#selectBox').find('option:last').remove();
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.