magna
Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
BS"D
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Multi-Select


The most lightweight and easiest solution to implement chained series of select elements in a form.

Some features:

- Unlimited nesting levels and extremely easy to setup, no matter how many levels the extension has.
- Highly customizable "combobox" with font, color, borders, sizes, spacing, etc.
- Similar behavior and appearance as standard wb elements.
- Bootstrap look support.
- RTL support.
- Tree navigation.
- Nesting levels can go from left to right or right to left.
- Custom spacing for an elegant mosaic composition.
- Maximum backward and cross-browser compatibility.
- No jQuery required.

...and more!


HTML 4.01 Transitional
W3C compliant


DEMO


How to use?

1. Drag and drop an extension instance in your page (usually within a form!).
2. Setup the "tree" structure.
3. Give a name for the select elements group that represent the nature of the information
    (that has meaning for the received emails).
4. Optionally, setup the styles that fit your design/scheme.
5. Preview or publish.

Enjoy!

How to get the values?

In case you need to get the full chained texts or values for specific programming needs (it is not needed to process forms as this is done automatically).


document.getElementById('MyMultiSelect').fullText; holds the text of each nested
select element.
document.getElementById('MyMultiSelect').fullValue; holds the value of each
nested select element.


(Just replace 'MyMultiSelect' with the actual instance ID).

Important notes:

- In the tree structure dialog box, use (only the) 'Text' property for the options.
- You can use the 'Title' property to use a value different than the option text.
w3c compliant
© 2012-17 by MAGNA web studio • all rights reserved


new shop with