Menghapus item dari kotak pilih

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>

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>

Anda dapat menghapus item yang dipilih dengan ini:

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

Ini berguna jika Anda memiliki daftar dan bukan dropdown.

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.

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

Ini harus dilakukan:

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

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(/./);.

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

Saya menemukan dua halaman yang tampaknya membantu, ini ditulis untuk ASP.Net, tetapi hal yang sama berlaku:

1. Cara menambah / menghapus item dari daftar dropdown menggunakan jQuery
2. ekspresi pemilih jQuery

Tautan berikut akan membantu-

http://api.jquery.com/remove/

http://api.jquery.com/append/

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

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

dan

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

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>

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

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

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.

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");

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