Here the simple AngularJS tutorial on creating Cascading DropDownList with Angular JS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> <script> function CountryController($scope) { $scope.countries = { 'India': { 'Andhra Pradesh': ['Vijayawada', 'Guntur', 'Nellore', 'Kadapa'], 'Madhya Pradesh': ['Hyderabad', 'Warangal', 'Karimnagar'], }, 'USA': { 'San Francisco': ['SOMA', 'Richmond', 'Sunset'], 'Los Angeles': ['Burbank', 'Hollywood'] }, 'Australia': { 'New South Wales': ['Sydney','Orange','Broken Hill'], 'Victoria': ['Benalla','Melbourne'] } }; } </script> </head> <body> <div ng-app class="container"> <div ng-controller="CountryController"> <div class="form-group"> <label class="control-label" for="Country">Country:</label> <select class="form-control input-lg" id="country" ng-model="states" ng-options="country for (country, states) in countries"> <option value=''>Select</option> </select> </div> <div class="form-group"> <label class="control-label" for="States">States:</label> <select class="form-control input-lg" id="state" ng-disabled="!states" ng-model="cities" ng-options="state for (state,city) in states"> <option value=''>Select</option> </select> </div> <div class="form-group"> <label class="control-label" for="City">City:</label> <select class="form-control input-lg" id="city" ng-disabled="!cities || !states" ng-model="city" ng-options="city for city in cities"> <option value=''>Select</option> </select> </div> </div> </div> </body> </html> |
I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.
I am Arjun from Hyderabad (India). I have been working as a software engineer from the last 7+ years, and it is my passion to learn new things and implement them as a practice. Aside from work, I like gardening and spending time with pets.
How would you add a display message passed on the third selection. For example select 1, 2 and 3 then give display a comment based on your selected
how to get values from database using pdo php mysql?
How can i consume data from a factory using http.get into id:name json format ?
I was searching for having this same functionality with AngularJS 2 and I come across this article. Thought of sharing with you.
http://www.talkingdotnet.com/cascading-dropdown-select-list-using-angular-js-2/
could any one provide this in angular4
Sure … give me couple days
Hi here is the Angular 4 tutorial – https://arjunphp.com/cascading-dropdown-angular/
Hello Arjun,
this is awesome and simple code to understand. Now, my question is how to get value and show them in our view part. When i will select any country that country should be rendered in view and that after when i select state then that state should be rendered in our view par as well as city too.
Sorry, I didn’t get you.