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