N.B: View the page source to check the original selectLists HTML (you’ll get a much better idea of how the script works believe me).
The following basic selectList structure is used by the script to create the demo multi-select widgits.
The following options have been built from a selectlist in which multiple="multiple" has been set; therefore, the script creates check buttons enabling multiple choices to be made. Additionally, the class fd-auto-collapse has been stipulated and so only one of the selection groups can be open at the same time.
The following options have been built from a selectlist in which multiple="multiple" has been set; therefore, the script creates check buttons enabling multiple choices to be made. Additionally, the class fd-auto-collapse has not been stipulated and so all of the selection groups can be open at the same time.
The following options have been built from a selectlist in which multiple="multiple" has not been set; therefore, the script creates radio buttons instead of checkboxs for each option (N.B: An "auto collapse" view is forced for Radio Buttons).
Additionally, the selectlist has been given the className fd-wrapper-ol which tells the script to wrap each selection group in an ordered list (Use fd-wrapper-ul should you want to wrap the selection group in an unordered list).
Read the related Language in the Lab post or download the JavaScript source.