Hi,

I'm using the select2 plugin on this cut down demo page.

The basic option tag is this:
Code:
<option>An option1 (this text needs to be styled differently)</option>
I need to find a way to style the text in brackets differently from the main text after the select2 plugin converts it to its own dropdown version.

The select is transformed to this:

Code:
<div class="container">
		<div class="control-group select-crop">
				<label for="s2id_autogen1" class="control-label">Select Your option</label>
				<div style="width: 100%;" id="s2id_testSelect" class="select2-container select2-container-multi select2 select2-container-active select2-dropdown-open">
						<ul class="select2-choices">
								<li class="select2-search-choice">
										<div title="An option3 (this text needs to be styled differently)">An option3 (this text needs to be styled differently)</div>
										<a tabindex="-1" class="select2-search-choice-close" onclick="return false;" href="#"></a></li>
								<li class="select2-search-field">
										<input style="width: 832.283px;" id="s2id_autogen1" autocomplete="off" autocorrect="off" autocapitilize="off" spellcheck="false" class="select2-input select2-focused" type="text">
								</li>
						</ul>
				</div>
				<select data-placeholder="Select option" class="select2 select2-offscreen" style="width:100%" id="testSelect" multiple="" tabindex="-1">
						<option>An option1 (this text needs to be styled differently)</option>
						<option>An option2 (this text needs to be styled differently)</option>
						<option>An option3 (this text needs to be styled differently)</option>
						<option>An option4 (this text needs to be styled differently)</option>
						<option>An option5 (this text needs to be styled differently)</option>
				</select>
		</div>
</div>

<!-- end container --> 
<div class="select2-sizer" style="position: absolute; left: -10000px; top: -10000px; display: none; font-size: 16px; font-family: sans-serif; font-style: normal; font-weight: 400; letter-spacing: normal; text-transform: none; white-space: nowrap;"></div>
<div style="width: 1219px; height: 463px; display: block;" class="select2-drop-mask" id="select2-drop-mask"></div>
<div id="select2-drop" style="display: block; top: 62px; left: 8px; width: 1203px;" class="select2-drop select2-drop-multi select2-display-none select2-drop-active">
		<ul class="select2-results">
				<li class="select2-results-dept-0 select2-result select2-result-selectable select2-highlighted">
						<div class="select2-result-label"><span class="select2-match"></span>An option1 (this text needs to be styled differently)</div>
				</li>
				<li class="select2-results-dept-0 select2-result select2-result-selectable">
						<div class="select2-result-label"><span class="select2-match"></span>An option2 (this text needs to be styled differently)</div>
				</li>
				<li class="select2-results-dept-0 select2-result select2-result-selectable select2-selected">
						<div class="select2-result-label"><span class="select2-match"></span>An option3 (this text needs to be styled differently)</div>
				</li>
				<li class="select2-results-dept-0 select2-result select2-result-selectable">
						<div class="select2-result-label"><span class="select2-match"></span>An option4 (this text needs to be styled differently)</div>
				</li>
				<li class="select2-results-dept-0 select2-result select2-result-selectable">
						<div class="select2-result-label"><span class="select2-match"></span>An option5 (this text needs to be styled differently)</div>
				</li>
		</ul>
</div>
There is an option for templating and using data attributes mentioned in the documentation but I am unable to work out how to tie this into a workable solution.

I assumed I could add the extra text via a data attribute on the option element.

e.g.
Code:
<option data-txt="this text needs to be styled differently">An option1 </option>
Then the data-txt attribute content could be appended to the original option content but enclosed inside a span with a class and placed in the revised dropdown selection list and selected item.

e.g.
Code:
An option1 <span class="newtext">this text needs to be styled differently</span>
The documentation suggest that it is easy and offers the following example code:

Code:
function format(state) {
var originalOption = state.element;
 
return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png' alt='" + $(originalOption).data('foo') + "' />" + state.text;
}
However, that's where I get completely lost as I don't know how to call that in relation to my particular example and amend the code to suit.

Hope that makes sense