0

How to create form that options on second dropdown depends on the selection of the option on first dropdown? The problem is that I have 3 dropdowns and every dropdown depends on the previous one.

For example:

DROPDOWN #1 Options: England / Spain / Italy

DROPDOWN #2 Options: (if England is selected) Premier League / Championship / League One

(if Italy is selected) Serie A / Serie B

DROPDOWN #3 Options: (if Premier League is selected) Saturday / Sunday / Monday

.... ( I hope you get the point)

I tried using this code, but I couldn't find solution for including third or even fourth dropdown options.

<select data-target="1">
<option value="">-- Select --</option>

{exp:channel:entries channel="football" dynamic="no" category="22" status="not closed" disable="member_data"}

{country}
<option value="{item:label}">{item:label}</option>
{/country}

{/exp:channel:entries}

</select>



{exp:channel:entries channel="football" dynamic="no" status="not closed" disable="member_data" category="22"}

<select data-group="1" data-target="2" data-ref="{country}">

<option value="">-- Select --</option>
{league}
<option value="{item:label}">{item:label}</option>
{/league}

</select>

{/exp:channel:entries}



{exp:channel:entries channel="football" dynamic="no" status="not closed" disable="member_data" category="22" }

<select data-group="2" data-target="3" data-ref="{league}">

<option value="">-- Select --</option>
{game}
<option value="{game:date-time}">{game:date-time}</option>
{/game}

</select>

{/exp:channel:entries}

{game} - that's Grid field {country}, {league} - those are Checkbox fields

1 Answer 1

0

There is no "native" way to do this in EE since the EE tags are all evaluated prior to the page being built - so once you can see the select tags on screen, EE has stopped its evaluation.

You could construct something that simulates the desired behaviour using multiple page loads (i.e. reload the page after each change to the select boxes) but it would be pretty slow / inefficient.

If you do not want to do it using page reloads to populate the second and third selects, you will have to do this using some combination of javascript and AJAX execution.

What you choose depends a bit on how large the possible options are for the second and third selects.

  • If there are not so many, it might be easiest to dump all the possible option sets out (e.g. into a javascript array) on page load (and if the options depend on variable data get this info via a json element generated by EE template) and use javascript to populate the second and third options depending on what the selected item in first / second dropdown is.
  • If there are many options such that loading them all into a json at start would be a penalty in page loading time, then you should grab them just when needed using AJAX calls to EE (triggered by javascript).

HTH

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.