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 coun…

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 selecti…

[image] Sebastian: In that case the view will need to decide what to show for city. 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 sel…

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 messa…

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’.

[image] RickBradford: In Elm, is there any way of retrieving the current index of a ‘select’ item? My feeling, based on limited research, is ‘no’. elm-community/list-extra has elemIndex that should work for this

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.

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.

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-c…

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 readi…

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?

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.

Multiple dropdown synchronisation

Learn

Sebastian October 16, 2020, 3:30am 6

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

Topic		Replies	Views
How to update an HTML element when the model changes Learn	4	2447	August 13, 2019
Input.select not available in Elm-UI? Learn	5	2986	January 5, 2019
Update functions getting called twice with one click event Learn	3	1037	May 27, 2021
New Confidenceman02/elm-select features! Show and Tell	2	565	January 1, 2023
Update a node in a tree Learn	17	3504	June 25, 2018

Multiple dropdown synchronisation

Related topics