Select2 thêm biểu tượng hình ảnh để tùy chọn động

Question

Đây là những gì select2.github.io mang đến cho bạn:

function addIcons(opt) { 
    if (!opt.id) { 
     return opt.text; 
    } 
    var $opt = $(
      '<span><img src="/images/flags/' + opt.element.value.toLowerCase() + '.png" class="img-flag" /> ' + opt.text + '</span>' 
      ); 
    return $opt; 
} 

Tôi muốn thêm một thuộc tính dữ liệu hình ảnh với các tùy chọn của tôi:

<option value="flag" data-image="/images/flags/flag.png">Country 1</option> 

và đăng nhập vào chức năng:

function addIcons(opt) { 
    if (!opt.id) { 
     return opt.text; 
    } 

    var optimage = opt.attr('data-image'); 
    var $opt = $(
      '<span><img src="/images/flags/' + optimage + '" class="img-flag" /> ' + opt.text + '</span>' 
      ); 
    return $opt; 
} 

Đáng buồn thay, một console.log đơn giản (opt); không trả về bất cứ điều gì trong hàm, vì vậy tôi không thể xem liệu tôi có thể truy cập thuộc tính data-image của mình hay không. Khối mã trên trả về lỗi, vì vậy điều này rõ ràng không hoạt động. Bất kỳ đề xuất về vấn đề này?

Answer 1

Nếu optimage trả "không xác định" thử mẫu của tôi: làm việc của nó tốt:

$("#selectUserForChat").select2({ 
 
\t \t templateResult: addUserPic, 
 
     templateSelection: addUserPic 
 
}); 
 
\t 
 
function addUserPic (opt) { 
 
\t if (!opt.id) { 
 
\t \t return opt.text; 
 
\t }    
 
\t var optimage = $(opt.element).data('image'); 
 
\t if(!optimage){ 
 
\t \t return opt.text; 
 
\t } else { 
 
\t \t var $opt = $(
 
\t \t '<span class="userName"><img src="' + optimage + '" class="userPic" /> ' + $(opt.element).text() + '</span>' 
 
\t \t); 
 
\t \t return $opt; 
 
\t } 
 
};

Answer 2

Hãy thử điều này:

var optimage = $(opt).data('image'); //or $(opt).attr('data-image') 
var $opt = $(
    '<span><img src="' + optimage + '" class="img-flag" /> ' + $(opt).text() + '</span>' 
); 

Answer 3

tôi giải quyết vấn đề với mã này: var optimage = $(opt.element).data('image');

$(".category").select2({ 
      templateResult: formatState, 
      templateSelection: formatState 
     }); 
     function formatState (opt) { 
      if (!opt.id) { 
       return opt.text; 
      }    
      var optimage = $(opt.element).data('image'); 
      if(!optimage){ 
       return opt.text; 
      } else {      
       var $opt = $(
        '<span><img src="' + optimage + '" width="23px" /> ' + opt.text + '</span>' 
       ); 
       return $opt; 
      } 

     };