Select2 with Primary selected item 2/4

Select2 with Primary selected item - 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
    };
}

see here for all code

see here for full explanation on my Blog