Xóa một mục khỏi hộp chọn

Làm cách nào để xóa các mục khỏi hoặc thêm các mục vào hộp chọn? Tôi đang chạy jQuery, nên làm cho công việc dễ dàng hơn. Dưới đây là một ví dụ chọn hộp.

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

Xóa một tùy chọn:

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

Thêm một tùy chọn:

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

Bạn có thể xóa mục đã chọn bằng cách này:

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

Điều này rất hữu ích nếu bạn có một danh sách và không có danh sách thả xuống.

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

Để thêm mục tôi sẽ tạo hộp chọn thứ hai và:

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

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

addSelect.onclick = add;

Không phải jQuery.

Để xóa một mục

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

Để thêm một mục

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

Để kiểm tra một tùy chọn

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

Để xóa tùy chọn đã chọn

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

Điều này nên làm điều đó:

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

Tôi thấy plugin thao tác chọn hộp jQuery hữu ích cho loại điều này.

Bạn có thể dễ dàng xóa một mục theo chỉ mục, giá trị hoặc biểu thức chính quy.

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

Để loại bỏ tất cả các tùy chọn, bạn có thể làm $("#myselect").removeOption(/./);.

Thêm / xóa giá trị động mà không cần mã cứng:

// xóa giá trị khỏi chọn động

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

// Thêm giá trị động để chọn

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

Tôi đã tìm thấy hai trang có vẻ hữu ích, nó được viết cho ASP.Net, nhưng những thứ tương tự nên được áp dụng:

1. Cách thêm / xóa các mục khỏi danh sách thả xuống bằng jQuery
2. Các biểu thức chọn jQuery

Các liên kết sau đây sẽ hữu ích-

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

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

Chỉ cần tăng cường điều này cho bất cứ ai tìm kiếm, bạn cũng có thể chỉ:

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

và

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

Tôi đã phải xóa tùy chọn đầu tiên khỏi một lựa chọn, không có ID, chỉ có một lớp, vì vậy tôi đã sử dụng mã này thành công:

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

Tôi chỉ muốn đề xuất một cách khác để thêm một option. Thay vì thiết lập valuevà textnhư một chuỗi, người ta cũng có thể làm:

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

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

Đây là một giải pháp ít xảy ra lỗi khi thêm động các giá trị và văn bản của tùy chọn.

Nếu ai đó cần xóa TẤT CẢ các tùy chọn bên trong một lựa chọn, tôi đã thực hiện chức năng litle.

Tôi hy vọng bạn thấy nó hữu dụng

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

Chỉ phải chạy

removeAllOptionsSelect("#contenedor_modelos");

đây là chọn hộp 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>

Khi bạn muốn loại bỏ hoàn toàn và thêm tùy chọn từ hộp chọn thì bạn có thể sử dụng mã này

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

đôi khi chúng ta cần ẩn và hiển thị tùy chọn từ hộp chọn, nhưng không xóa thì bạn có thể sử dụng mã này

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

đôi khi cần phải loại bỏ tùy chọn đã chọn khỏi hộp chọn

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

Khi bạn cần loại bỏ tất cả các tùy chọn thì mã này

('#selectBox').empty();

Khi cần tùy chọn đầu tiên hoặc cuối cùng thì mã này

$('#selectBox').find('option:first').remove();
$('#selectBox').find('option:last').remove();