<option> को चुनने के लिए कैसे गुण 2?

Question

मैं Select2 4.0 का उपयोग कर रहा हूं। मेरे पास विकल्पों की एक सूची है, जिनमें से कुछ "हटाए गए" हैं और मैं संकेत देना चाहता हूं कि कौन से हैं। जिसके परिणामस्वरूप HTML कोड Select2 उत्पन्न करता है कि मैं उस वर्ग को संदर्भित करने के लिए किसी भी तरह नहीं दिख रहा है पर,

<script src="/static/js/select2.min.js"></script> 
<script> 
$(function() { 
    $("#item-list").select2({ 
     placeholder: 'Select item' 
    }); 
}); 
</script> 

हालांकि: मेरा चयन तत्व इस तरह है:

<style>.deleted { color: red; }</style> 

<select name="itemid" id="item-list" tabindex="1"> 
    <option></option> 
    <option value="1">Item 1</option> 
    <option value="2" class="deleted">Item 2</option> 
    <option value="3">Item 3</option> 
</select> 

और यह इस तरह initialised है। बिना किसी किस्मत के विकल्प पर data-deleted विशेषता का भी प्रयास किया।

एकमात्र चीज जो मैं देखता हूं वह करीब आता है templateResult विकल्प, जहां मैं opt.element.className की जांच कर सकता हूं। लेकिन मैं नहीं देख सकता कि वहां से select2 विकल्प का उपयोग कैसे करें। वैसे भी कॉलबैक प्रत्येक एकल खोज पर चलता है जो कि मैं जो चाहता हूं वह बिल्कुल नहीं है।

क्या चयन 2 में विशिष्ट विकल्पों को स्टाइल करने का कोई और तरीका है?

अद्यतन: के रूप में टिप्पणी में उल्लेख किया वहाँ एक find() समारोह है, लेकिन यह केवल मूल <option> तत्वों, नहीं <li> तत्वों कि Select2 उत्पन्न हो जाता है। यहाँ मैं क्या करने की कोशिश की है:

var sel2 = $("#item-list").select2({ 
    placeholder: 'Select item' 
}); 

sel2.find('.deleted').each(function() { 
    $(this).css('color', 'red'); 
}); 

Answer 1

Select2 4.0.1 (just released) के रूप में, आप templateResult विकल्प के साथ कक्षाएं हस्तांतरण कर सकते हैं। पहले पैरामीटर डेटा वस्तु प्रदर्शित किया जाता है की जा रही है, और दूसरा तर्क कंटेनर है कि यह में प्रदर्शित किया जाएगा है।

$("select").select2({ 
 
    templateResult: function (data, container) { 
 
    if (data.element) { 
 
     $(container).addClass($(data.element).attr("class")); 
 
    } 
 
    return data.text; 
 
    } 
 
});

.yellow { background-color: yellow; } 
 
.blue { background-color: blue } 
 
.green { background-color: green; }

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.css" rel="stylesheet"/> 
 

 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.js"></script> 
 

 
<select class="select2"> 
 
    <option value="AL" class="yellow">Alabama</option> 
 
    <option value="AK" class="blue">Alaska</option> 
 
    <option value="AZ" class="green">Arizona</option> 
 
</select>

Answer 2

आप भी उपयोग करने के लिए चयनित करने के लिए वर्ग को जोड़ने चाहते हैं आइटम templateSelection से एक ही फ़ंक्शन को कॉल करते हैं।

function select2CopyClasses(data, container) { 
    if (data.element) { 
     $(container).addClass($(data.element).attr("class")); 
    } 
    return data.text; 
} 

$("select").select2({ 
    templateResult: select2CopyClasses, 
    templateSelection: select2CopyClasses 
}); 

Answer 3

यदि आप डिफ़ॉल्ट रूप से ऐसा करना चाहते हैं, तो प्रत्येक नई चयन 2 विकल्प से चयन 2-तत्व से वर्ग परिभाषा की प्रतिलिपि बनाएँ। चुनने के बाद कोड शामिल करें select2.js

$.fn.select2.defaults.set("templateResult", function(item, li) { 
    if (item && item.element && item.element.className.length) { 
    $(li).addClass(item.element.className); 
    } 
}