Làm cách nào để thay đổi tùy chọn <select> với jQuery?

Giả sử có một danh sách các tùy chọn có sẵn, làm thế nào để bạn cập nhật <select>với <option>s mới ?

Bạn có thể xóa các tùy chọn hiện có bằng cách sử dụng emptyphương thức và sau đó thêm các tùy chọn mới của bạn:

var option = $('<option></option>').attr("value", "option value").text("Text");
$("#selectId").empty().append(option);

Nếu bạn có các tùy chọn mới trong một đối tượng, bạn có thể:

var newOptions = {"Option 1": "value1",
  "Option 2": "value2",
  "Option 3": "value3"
};

var $el = $("#selectId");
$el.empty(); // remove old options
$.each(newOptions, function(key,value) {
  $el.append($("<option></option>")
     .attr("value", value).text(key));
});

Chỉnh sửa: Để xóa tất cả các tùy chọn nhưng đầu tiên, bạn có thể sử dụng :gtbộ chọn, để lấy tất cả các optionphần tử có chỉ số lớn hơn 0 và removechúng:

$('#selectId option:gt(0)').remove(); // remove all options, but not the first 

Tôi đã ném câu trả lời tuyệt vời của CMS vào một phần mở rộng jQuery nhanh:

(function($, window) {
  $.fn.replaceOptions = function(options) {
    var self, $option;

    this.empty();
    self = this;

    $.each(options, function(index, option) {
      $option = $("<option></option>")
        .attr("value", option.value)
        .text(option.text);
      self.append($option);
    });
  };
})(jQuery, window);

Nó mong đợi một loạt các đối tượng có chứa các khóa "văn bản" và "giá trị". Vì vậy, cách sử dụng như sau:

var options = [
  {text: "one", value: 1},
  {text: "two", value: 2}
];

$("#foo").replaceOptions(options);

$('#comboBx').append($("<option></option>").attr("value",key).text(value));

trong đó comboBx là id hộp tổ hợp của bạn.

hoặc bạn có thể nối các tùy chọn dưới dạng chuỗi vào bên trongHTML đã có và sau đó gán cho chọnHTML bên trong.

Biên tập

Nếu bạn cần giữ tùy chọn đầu tiên và loại bỏ tất cả các tùy chọn khác thì bạn có thể sử dụng

var firstOption = $("#cmb1 option:first-child");
$("#cmb1").empty().append(firstOption);

Đối với một số lý do kỳ lạ phần này

$el.empty(); // remove old options

từ giải pháp CMS không hiệu quả với tôi, vì vậy thay vào đó tôi chỉ đơn giản sử dụng cái này

el.html(' ');

Và nó hoạt động. Vì vậy, mã làm việc của tôi bây giờ trông như thế:

var newOptions = {
    "Option 1":"option-1",
    "Option 2":"option-2"
};

var $el = $('.selectClass');
$el.html(' ');
$.each(newOptions, function(key, value) {
    $el.append($("<option></option>")
    .attr("value", value).text(key));
});

Việc xóa và thêm phần tử DOM chậm hơn so với sửa đổi phần tử hiện có.

Nếu các bộ tùy chọn của bạn có cùng độ dài, bạn có thể làm một cái gì đó như thế này:

$('#my-select option')
.each(function(index) {
    $(this).text('someNewText').val('someNewValue');
});

Trong trường hợp bộ tùy chọn mới của bạn có độ dài khác nhau, bạn có thể xóa / thêm các tùy chọn trống bạn thực sự cần, sử dụng một số kỹ thuật được mô tả ở trên.

Nếu ví dụ mã html của bạn chứa mã này:

<select id="selectId"><option>Test1</option><option>Test2</option></select>

Để thay đổi danh sách tùy chọn bên trong lựa chọn của bạn, bạn có thể sử dụng mã này dưới đây. khi tên của bạn chọn tên selectId .

var option = $('<option></option>').attr("value", "option value").text("Text");
$("#selectId").html(option);

trong ví dụ này ở trên tôi thay đổi danh sách tùy chọn cũ chỉ bằng một tùy chọn mới.

Không giúp đỡ à?

$("#SelectName option[value='theValueOfOption']")[0].selected = true;

Trường học cũ làm mọi thứ bằng tay luôn luôn tốt cho tôi.

1. Làm sạch lựa chọn và để lại tùy chọn đầu tiên:

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

2. Nếu dữ liệu của bạn đến từ Json hoặc bất cứ điều gì (chỉ cần kết hợp dữ liệu):

       var JSONObject = JSON.parse(data);
       newOptionsSelect = '';
       for (var key in JSONObject) {
           if (JSONObject.hasOwnProperty(key)) {
               var newOptionsSelect = newOptionsSelect + '<option value="'+JSONObject[key]["value"]+'">'+JSONObject[key]["text"]+'</option>';
           }
       }
   
       $('#your_select_id').append( newOptionsSelect );

3. Json Objetc của tôi:

       [{"value":1,"text":"Text 1"},{"value":2,"text":"Text 2"},{"value":3,"text":"Text 3"}]

Giải pháp này rất lý tưởng để làm việc với Ajax và các câu trả lời trong Json từ cơ sở dữ liệu.

nếu chúng tôi cập nhật <select>liên tục và chúng tôi cần lưu giá trị trước đó:

var newOptions = {
    'Option 1':'value-1',
    'Option 2':'value-2'
};

var $el = $('#select');
var prevValue = $el.val();
$el.empty();
$.each(newOptions, function(key, value) {
   $el.append($('<option></option>').attr('value', value).text(key));
   if (value === prevValue){
       $el.val(value);
   }
});
$el.trigger('change');