Multi-Select Crossover
powered by
The basic function the multi-select crossover relies on. It takes two arguments: arr (array of strings) and targetMultiSelect (the id for the items/selected items select box). The button presses simply call upon this function.
The add button removes the selected option elements from the 'items' select box, and calls on the generateOptionElements function to create new elements that are appended to the 'selected items' select box.
The remove button removes the selected option elements from the 'selected items' select box and stores their values in an array. Next each option element from the 'items' select box are pushed to the array and removed. The array is alphabetized. The generateOptionElements function is called to generate option elements and append to the 'items' select box.
The add all/remove all buttons are just an extension of the add/remove buttons. The add all will select all option elements from the 'items' select box, remove them, and create new option elements in the 'selected items' select box. The remove all will do the same thing, but will sort the options before appending the new option elements.
In the case that the user would like to select an option that's not available, they can temporarily add it.
The user can enter a custom option using the text input. The 'new item' add button grabs the input string and pushes it to an array. The existing selected options are also pushed to the array. Then using the generateOptionElements function, the array is converted into option elements and appended to the 'selected items' select box.
The new custom option can be removed and readded just like any of the existing options. Once the page is refreshed the option will no longer persist and will need to be readded.
