Select2 with Primary selected item all 4 code files

1_markup.html

<label for="Troops">Troops</label>
<select name="Troops" id="Troops" multiple="" class="primary-selectable">
	<option value="1">Barbarian</option>
	<option value="2">Archer</option>
	<option value="3">Goblin</option>
	<option value="4">Giant</option>
	<option value="5" selected="selected">Wall Breaker</option>
	<option value="6">Balloon</option>
	<option value="7" selected="selected">Wizard</option>
	<option value="8">Healer</option>
	<option value="9">Dragon</option>
	<option value="10" selected="selected">P.E.K.K.A.</option>
	<option value="11">Minion</option>
	<option value="12">Hogrider</option>
	<option value="13">Valkyrie</option>
	<option value="14" selected="selected">Golem</option>
	<option value="15" selected="selected">Witch</option>
	<option value="16">Lava Hound</option>
	<option value="17" selected="selected">Barbarian King</option>
	<option value="18" selected="selected">Archer Queen</option>
</select>
<label>Primary Troop</label>
<input type="hidden" id="TroopsPrimary" name="TroopsPrimary" value="17">
<span id="TroopsPrimaryDisplay"></span>
<span id="TroopsPrimaryDisplayNone">No Primary Troop selected</span>

2_script.js

// set up a facade to handle interacting with the PrimarySelect2
function PrimarySelect2($element, s2Options) {
    // reality check
    if (!$element || !$element.length) return;
    
    // implementing on more than one item is left as an exercise for the reader.  suggest jQuery plugin pattern
    $element = $element.first();
    // pass the options straight through to Select2
    $element.select2(s2Options);
    // get a handle to the Select2 api
    var s2Instance = $element.data('select2');
    
	// trigger special behavior by adding this class in the markup
    if ($element.hasClass('primary-selectable')) {
        // using the id of the select2'd form control, we look for additional fields on the page to populate, via a Naming Convention
    	var formKey = $element.attr('id');
        var primary = {
            // a hidden field to populate with the Primary selected item's id
            $hidden: $('#' + formKey + 'Primary'),
            // a place to display the text of the Primary selected item
            $display: $('#' + formKey + 'PrimaryDisplay'),
            // a holder for a feedback message when there's no Primary selected item
            $displayNone: $('#' + formKey + 'PrimaryDisplayNone'),
        };
        function selectPrimary($item, detect) {
            // if we pass detect, we want to read the state from the UI
            if (detect) {
                $item = $('.select2-search-choice.select2-primary', s2Instance.container).first();
            } else {
                // if nothing was passed, just get the first one
                $item = $item || $('.select2-search-choice', s2Instance.container).first();
                if (!$item.length) return;
                $item.toggleClass('select2-primary').siblings().removeClass('select2-primary');
            }
            var s2Data = null, newValue = null;
            
            if ($item.hasClass('select2-primary')) {
                s2Data = $item.data('select2Data');
                newValue = (s2Data && s2Data.id) ? s2Data.id.toString() : null;
            }
            primary.$hidden.val(newValue);
            
            if (newValue && s2Data) {
                primary.$displayNone.hide();
                primary.$display.html(s2Data.text).show();
            } else {
                primary.$displayNone.show();
                primary.$display.hide();
            }
        }
        
        s2Instance.container.on('click.s2p','.select2-search-choice', function(e) {
            selectPrimary($(this));
        });
        $element.on('change.s2p', function(e) {
            if (e.added && s2Instance.val().length === 1) {
                // if it's the first one added, set it as Primary automatically
                selectPrimary();
            } else {
                // auto detect what should be primary in other cases
                selectPrimary(null, true);
            }
        });
        
        // initialize the selection from the Hidden field
        var initSelected = primary.$hidden.val();
        if (initSelected && initSelected !== '') {
            $('.select2-search-choice', s2Instance.container).each(function() {
                var $item = $(this);
                var s2Data = $item.data('select2Data');
                if (s2Data && s2Data.id) {
                    if (initSelected === s2Data.id.toString()) {
                        selectPrimary($item);
                        return false;
                    }
                }
            });
        }
    }
    
    function destroy() {
        if ($element) {
            $element.off('change.s2p');
            $element.off('change.ntk');
            s2Instance &&
                s2Instance.container &&
                s2Instance.container.off('click.s2p');
            $element.select2('destroy');
        }
        s2Instance = null;
        $element = null;
    }
    
    return {
        $element: $element,
        s2Instance: s2Instance,
        destroy: destroy
    };
}

3_invokation.js

$(function() {
    // create an instance of PrimarySelect2 and attach to our Troop selector

    // we set no special Select2 options.  you could pass the normal Select2 options struct here, it will be passed to Select2 constructor
    var s2Options = {};
    var ps2 = PrimarySelect2($('#Troops'), s2Options);
    // ps2 is your handle now to the PrimarySelect2 interface
    
    // if you're in a dynamic form later during your cleanup just call
    // ps2.destroy();
});

4_styles.css

/* http://www.cssportal.com/css-gradient-generator/ */
.select2-container-multi .select2-choices .select2-search-choice.select2-primary {
    background-color: green;
    border-color: green;
    background-image: -ms-linear-gradient(top, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%);
    background-image: -moz-linear-gradient(top, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%);
    background-image: -o-linear-gradient(top, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5CBD73), color-stop(50, #79EF70), color-stop(51, #24E23D), color-stop(100, #1F9C49));
    background-image: -webkit-linear-gradient(top, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%);
    background-image: linear-gradient(to bottom, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%);
}
/* visibility is handled by JavaScript */
#TroopsPrimaryDisplay, #TroopsPrimaryDisplayNone {
    display: none;
}
#TroopsPrimaryDisplayNone {
    font-style: italic;
    color: #888;
}

see here for full explanation on my Blog