This exercise uses the famous library Select2 version 3.5.2 for a multi select. It extends the default Select2 behavior by allowing the User to click any of the selected items to designate it as the "Primary" selected item. Feedback is given by highlighting the Primary selected item in green, and displaying the Primary selected item on a separate Form row. A hidden field is added by using a Naming Convention, so that the Primary selected item can be submitted in the containing Form along with the normal Select2 data.
Here's what we will end up with. There is a Select2 for a list of Troops, and there is a Primary Troop selected, shown in green, and on a separate line. We can interactively click the Select2 items to toggle the Primary Troop selection.
Here's what we will end up with. There is a Select2 for a list of Troops, and there is a Primary Troop selected, shown in green, and on a separate line. We can interactively click the Select2 items to toggle the Primary Troop selection.
To explain how I did it, let us begin with the Markup:
We have a standard Html select input field defined in the Markup, where we will attach Select2. It is declared as multiple and I have added a special class called "primary-selectable". That way you could signal the extra code for Primary to run or not, based on the presence of this class.
Following the select we have the display for the Primary selected item. It includes a Hidden form field to carry the selected item's ID, a place to output the Primary item's text, and a container where a message can be displayed if no Primary item is selected.
And now for the Script.
Following the select we have the display for the Primary selected item. It includes a Hidden form field to carry the selected item's ID, a place to output the Primary item's text, and a container where a message can be displayed if no Primary item is selected.
And now for the Script.
I encapsulate the Primary-selectability as this function that invokes Select2, and returns a facade which the application can use to communicate with the underlying object. It can support any Select2 options structure which the application passes as a parameter.
It reads the Primary selected value from the Hidden field to begin, and runs its internal update function then and also when the first item is selected in the Select2, and during other change events. It exposes a destroy method so that dynamic forms can clean up the event handlers.
In the application code, instead of directly calling Select2 now, we call this facade function with an element as the first parameter and any applicable Select2 options second.
It reads the Primary selected value from the Hidden field to begin, and runs its internal update function then and also when the first item is selected in the Select2, and during other change events. It exposes a destroy method so that dynamic forms can clean up the event handlers.
In the application code, instead of directly calling Select2 now, we call this facade function with an element as the first parameter and any applicable Select2 options second.
And finally give some special styling to the Primary selected item so that it is visually distinct. I used a gradient generator to build a green gradient similar to Select2's gray gradient it uses for item background.
I put this all together in a JSFiddle so you can play with it interactively.
Remember, this is using Select2 version 3.5.2. There are breaking changes in version 4.0.0 so this probably is not going to work there.
I welcome your comments, please let me know if you're using the code.
Remember, this is using Select2 version 3.5.2. There are breaking changes in version 4.0.0 so this probably is not going to work there.
I welcome your comments, please let me know if you're using the code.
RSS Feed
