Ion-select with the nested values


Didn’t get it from the Doc, so asking here.

What is the best way to make an ion-select with the nested values (preferably using ionic 3 standard components).

Smth like:

colors = [‘red’,‘white’,‘blue’];
animals = [‘dog’,‘cat’];
top_values = [colors, animals].

So, the user will have to select either animal or color and choose a particular sub-value (ex: color: red).

i’ve just gone through all components list & API docs.

At least - is there any components which can be used as traditional dropdown ? (to expand sub-values in ion-select)

What do you want that is different from two separate <ion-select> components?

that’ll open additional popups. i need kind of traditional dropdown from the first-level values.

IMHO that is anything but “traditional”, especially in a mobile app. I also suspect you will get more useful advice if you describe what you are really trying to do, because the whole colored animal thing doesn’t make a whole lot of sense.

1 Like

i want a categories expand on click and show subcategories(without opening additional modal) in this ion-select modal.

I think you’re going to have to write your own component then, because that’s not a normal use case. Normally, people have multiple selects where the options of later ones depend on what is chosen in previous ones. The canonical example is country/province/city.

I woud try

In the modal window you can do what you want. For example present a list and on click hide the list and present the sublist. Then the user clicks the last option close the modal and work with the data.

Are you trying to implement sub-menu to choose additional info inside element(s)?
If so, you are looking for pop-over menu.

Also look at Select which also has options of opening as sub-menu or modal popup.