Select2 विकल्प के लिए छवि आइकन जोड़ने गतिशील

Question

यह वही है select2.github.io आप देता है:

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

मैं अपने विकल्पों के लिए एक डेटा छवि विशेषता जोड़ना चाहते हैं:

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

और इसे फ़ंक्शन में लॉग इन करें:

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

अफसोस की बात है, एक साधारण console.log (opt); फ़ंक्शन में कुछ भी वापस नहीं करता है, इसलिए मैं नहीं देख सकता कि मैं अपने डेटा-छवि विशेषता का उपयोग कर सकता हूं या नहीं। कोड का उपरोक्त ब्लॉक एक त्रुटि देता है, इसलिए यह स्पष्ट रूप से काम नहीं करता है। इस मामले पर कोई सुझाव?

Answer 1

optimage देता है, तो "अनिर्धारित" मेरी नमूना कोशिश: अपने ठीक काम कर रहा:

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

Answer 2

इस प्रयास करें: 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; 
      } 

     }; 

Answer 3

मैं इस कोड के साथ समस्या हल

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