Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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;
}
Owner

hughanderson4 commented Aug 4, 2015

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