Create a gist now

Instantly share code, notes, and snippets.

Select2 with Primary selected item all 4 code files
<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>
// 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
};
}
$(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();
});
/* 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;
}
@hughanderson4
Owner

see here for full explanation on my Blog

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment