jQuery customFormSelect

customFormSelector is a simple jQuery javascript plugin that works by setting up any parent element and it's children as a typical HTML SELECT element. It does this by creating a new hidden input (<input type="hidden" />) after the parent and then attaching click callbacks to all the children. When a child is clicked, the value attribute associated with it becomes the new value and the previous value is deselected

Versions

• 1.0 - Added option for multi-select. Now more than one option can be selected in the same way as using a <select> element.
• 0.2 - Added customFormSelectClear to reset the current value.
• 0.1.2 - Fixed bug where re-calling customFormSelect would not reset the current value.
• 0.1.1 - Stopped using Event.target when it should be Event.currentTarget. The former was causing children within the items to be selected instead of the items themselves.
• 0.1.0 - First release

First Demo - Simple

This is a simple list of DIV elements within a parent DIV. When any one of the DIVs are selected, the previous one is unselected. It works by grabbing the name attribute of #demo1 and creating a new INPUT element of the same name.

Second Demo - Preselected #1

This is essentially the same list, but now we want the second div to be selected by default, this is the first way to do this.

Third Demo - Preselected #2

This is essentially the same as the second demo, but instead of using the options to select the value, we let the element tell us it's selected.

Fourth Demo - Callback

Here we will use the callback function in order to alert us when the option changed

Fifth Demo - Alternate class name

Maybe you already have a class called selected and can't change it. You can have customFormSelect use a different class name with the selectedClass option.

Sixth Demo - Multiple Select

Sometimes the value you want isn't singular, less of a radio button, more a series of checkboxes with the same name. <select multiple>. Click once to select, click again to deselect. It works by grabbing the name attribute of #demo6 and creating a new SELECT element of the same name.

Seventh Demo - Multiple Select via option

Same as the sixth demo, but W3C compliant.