Select2 không hiển thị giá trị đã chọn

Question

Chọn2 tải tất cả các mục từ danh sách của tôi thành công, vấn đề tôi tìm thấy khi cố gắng chọn giá trị cụ thể khi tải trang. Ví dụ:

:: đặt select2 trong một phần tử html cụ thể, không có giá trị nào được chọn ngay cả khi tất cả các mục được tải.

$('#my_id').select2(); 

:: Khi trang được tải Tôi đang cố gắng hiển thị một mục cụ thể được chọn, nhưng không hoạt động như mong đợi, bởi vì thậm chí được chọn, select2 không hiển thị.

$('#my_id').val('3'); //select the right option, but doesn't render it on page loads. 

Làm cách nào để chọn tùy chọn bật lên khi tải trang?

Xin cảm ơn trước.

CẬP NHẬT

:: Làm thế nào tôi tải tất cả các mục Select2 (xin lỗi, ngọc bích của nó, không tinh khiết HTML):

label(for='category') Category 
    span.required * 
select(id='category', style='width:230px', name='category') 
    option(value='') - Select - 
    each cat in categories 
     option(value='#{cat.id}') #{cat.description} 

P.S .: Tất cả các mục từ danh sách của tôi được nạp.

:: Làm thế nào tôi khởi tạo Select2:

Chỉ cần đặt mã dòng sau vào javascript của tôi và nó không thành công:

$('#category').select2(); 

:: Làm thế nào tôi đang cố gắng để chọn một giá trị cụ thể:

• nỗ lực đầu tiên:

  $('#category').select2(
      { 
       initSelection: function(element, callback) { 
        callback($('#field-category').val()); 
       } 
      } 
  ); 
  

• Thứ hai nỗ lực:

  $('#category').val($('#field-category').val()); 
  

P.S .: #field-category có giá trị một trường nhập ẩn của nó và hoạt động OK.

Cảm ơn các bạn!

Answer 1

Bạn cần sử dụng tùy chọn initSelection để đặt giá trị ban đầu.

Nếu bạn đang sử dụng một select yếu tố được xác định trước để tạo ra các Select2, bạn có thể sử dụng các phương pháp sau đây

$('select').select2().select2('val','3') 

Demo: Fiddle

Answer 2

Dưới đây là làm thế nào để làm cho val trong Select2 chỉ cần chọn phần tử tương ứng. Vì lý do nào đó, select2 không cung cấp chức năng tra cứu các lựa chọn theo id.

init:

$("#thing").select2({data:sources, initSelection: function(item, callback) { 
    // despite select2 having already read the whole sources list when you 
    // do .val(n) you have to explicitly tell it how to find that item again. 
    var to_be_selected = null; 
    $.each(sources, function(index, thing) { 
    if (thing.id == item.val()) { 
     to_be_selected = thing; 
     return; 
    } 
    }) 
    callback(to_be_selected); 
}}) 

bình thường đang

// to load the thing with id==3 from the initial sources list. 
$("#thing").select2({'val': 3}) 

Answer 3

thêm một sự thay đổi kích hoạt sau khi cài đặt val:

$('#my_id').val('3').trigger('change');