Cascading dropdown list select depends on the first selection

ionic-v1
1

I want to create a dropdown list that depend of the first selection because mobile screen is small and showing 30 items in the lists will look too long.

Example: I want to select country first, and then the select the area of the country selected. When I selected Australia, only area of Adelaide and Victoria will be the option to be selected.

My code is here. Current code is vertical and will unable to make a long list short by separate them. Need a dropdown select that can have a area depends on the country selected.

2

The wireframe you included is very non-standard. Are you really trying to build this? I would suggest using two dropdowns, one to select country and then fill the seconds one depending on the first selection.

3

Hi Sujan12,

Yes, It is what I want to build but unable to do so. How can I do it?

4

You probably can’t as this is one input. When you select something it closes.
(Also not that dropdown on iOS and Android don’t look and work like that at all)

5

I am new in ionic. What is the best way to do it? please advice

6

The best way is to force the user to select the country they want. Then in another select filter all the locations for that country.

7

Agree. Any example how to do it in ionic? Try to search but unable to find any similar application.

8

I make a quick plnkr to show you something like you want.

if you have any question don’t hesitate to ask!

9

Hi Adonai,

Thanks a lot. One question, how will a user know he need to input the zone after he/she input the country column?
He may select the country and then press search that will not working. If there have some indicator that can let user know he must select both country and zone in order to get the search result will be nice.

Thanks again for your advice

10

Hi again!

I update the plunker to show you one of the multiple solutions

You can have a CSS style when one input is disabled, then, when you select a country and the other field is not disabled anymore, there is a visual change that the user will notice.

You can show an alert when they try to search without fill all fields (as we do in the plunker example).

You can underline the fields with a red (or other similar warning color) until the fields are complete, then switch to a green color (or delete the red color).

You can write some text with indications of what the user have to do.

Or you can have a mix of this solutions!

1 Like
11

Thanks a lot.
I found that I need to use the option value as in my original code.
How to put option value='%' or option value='A' that gets data from API into your code?
There is also <select ng-model="searchQuery.stockGrading" ng-init="searchQuery.stockGrading = '%'"> which I do not know where to put in your code.
May be ng-init is not needed anymore, but I think it will not work without ng-model="searchQuery.stockGrading which ng-model already taken in your current code.

12

Hi again!!

I update the plunkr to add a custom init value (like you do with ng-init="searchQuery.stockGrading") in my case Victoria (A). But I add it in the controller function not in the HTML

 $scope.form.selectedCountry = $scope.countries[0];
 $scope.form.selectedZone = $scope.zones[1];

If you want I can make a “more” specific plunker with your variables and data, but I think the example bellow is enought

13

Thanks Adonai,

isng-model="searchQuery.stockGrading is skipped or is replace by command in controller as well?

14

your ng-model="searchQuery.stockGrading is like $scope.form.selectedZone in my controller, the difference is that I have all the selectedZone object, but I can get the value like: form.selectedZone.value in my example, this value will have an ‘A’ or ‘%’ or whatever value it gets from the database once you parse the objects.