Multiple dropdown synchronisation

Learn
1

In my Elm app, I have two ‘select’ elements, ie dropdowns. The first is the main category, the second a list of sub-categories dependent on the content of the main category.

For example, if the main category shows a list of countries, then the sub-category contains a list of cities within that country. The ‘view’ function is then instructed to show information relevant to that city.

Whenever I change the main category, the contents of the sub-category change to show the relevant items.

But what I cannot do is to access the index of the sub-category. If I have selected main category ‘Italy’ and sub-category ‘Milan’, when I change the main category from ‘Italy’ to ‘Greece’, I want to reset (or retrieve) the current index of the sub-category, so that I know what information to display in the ‘view’ function.

If I cannot do this, then what appears as the sub-category item is out of sync with the information displayed in the ‘view’ function.

Is there some way to do this?

2

For this we use a type ParentChildSelection

type ParentChildSelection
    = NoSelection
    | ParentSelected String
    | ChildSelected String String

If you select a new country, this will become ParentSelected Greece. In that case the view will need to decide what to show for city.

After selecting a city this becomes ChildSelected Greece Athens. We keep the id of the parent here for easy lookup.

3

That’s the core of the problem. The ‘index’ of the sub-category is carried over when the main category is changed, so the ‘view’ function does not know what to display.

It could display a generic ‘No city selected’ view, I suppose, but that still wouldn’t really be in sync.

4

In the type we use ParentChildSelection the index of the sub-category is not carried over when you change the country. This becomes ParentSelected Greece. So there is no data about the selected city anymore. The view can show No city selected as you suggest.

So the country dropdown produces a message like ChangeSelection (ParentSelected Greece) and the city dropdown produces ChangeSelection (ChildSelected Greece Athens)

5

OK, that’s a good interim solution, thanks.

In Elm, is there any way of retrieving the current index of a ‘select’ item? My feeling, based on limited research, is ‘no’.

6

elm-community/list-extra has elemIndex that should work for this

7

Yes, that should work, thanks.

It’s getting the index not from the ‘select’ item itself, but from the List used to populate the ‘select’ item, but that shouldn’t be an issue as I’m not deleting or adding to the items.

8

If you want to get the index from the select you could render your options using List.indexedMap. Then pass the index to the message somehow.

But also, why do you want the index? Usually there is better solution in Elm that doesn’t involve using indexes.

9

To go back to my city/country situation, let us say I have chosen the first main category ‘Italy’ and the third sub-category ‘Venice’.

If I now change the main category from Italy to Greece, this repopulates the sub-category with the cities of Greece, and the select item still shows the third sub-category item, now perhaps ‘Heraklion’, but there is no way to inform the view function to change the information,shown for this item, unless I have the index and can pass it to the view function.

Your initial suggestion was that changing the main category could result in a ‘No City Selected’ view, but if possible I want to do better than that and show the relevant item.

10

I might be misunderstanding here, but what I’ve done in multiple <select> situations is to use Html.Attributes.selected bool on every <option> so I can control from the model exactly what is selected. This way you always know what is selected (if anything), and you can change it easily without reading the index from the DOM node or anything.

11

How does that look when you change the ‘main’ category?

Does the sub-category ‘select’ item automatically show the selected item? And how do you tie the view to the selected item?

Is there some code you could share?

12

Sorry, I have no code to share. But when you change the main category you’re free to update your model any way you want that makes sense – like changing the sub category to something. Since your view is just a projection of your model it will automatically show the right thing.

13

OK, I think I get that, thanks.

14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.