How to use

How to use:

1: Insert the .js file "shrelational.js" into your project, preferably before the end of the body tag.

2: Add the .selectTree class into all selects that will be part of the feature. You can change this class name by modifying the value of "selectTreeSelector" variable.

<select class="selectTree">

3: Add data-shr-id="something" into all parents select.

<select data-shr-id="@somethingCod" class="selectTree">
<select data-shr-id="@something2Cod" class="selectTree">

Always ending with "Cod", because this value has to be unique to the select.

4: Add a reference to the parents into the options of the children select. When there is only one parent:

<option data-@something-cod="2" value="7">Fourth 7</option>

When there are many parents:

<option data-@something-cod="1" data-@something2-cod="2" value="6">Fourth 6</option>

5: Add an empty message to the child:

<select class="selectTree" data-shr-empty="There is no child to the selected parent">

Notes

A child can have on or many parents. As well as a parent can have one or many children. There is no limit of selects.

If you want a child to be connected to more than one value of the parent, there is two ways: Splitting the value by commas:

<option data-@something-cod="5,6" value="5">Second 5</option>

Rewriting an option with the same value, but changing the parent's reference:

<option data-@something-cod="5" value="5">Second 4</option>
<option data-@something-cod="6" value="5">Second 5</option>

Extras:

To set an option selected, you can use either the default "selected" attribute:

<option selected="on">Second 5</option>

Or setting the selected option in data-shr-value:

<select class="selectTree" data-shr-value="@valueOption">

If you want an option to list all child's options:

<select class="selectTree" data-shr-value="@valueOption">