State and city populate Dropdowns
Question
Here Country, State and City filter dropdown lists are there. I dont want country. I want only state and city dropdowns. If I select state it should populate the appropriate cities.
Only in india state and cities I want. Can anyone please help me to do this.
var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.name = 'World'; $scope.countries = { 'USA': { 'Alabama': ['Montgomery', 'Birmingham'], 'California': ['Sacramento', 'Fremont'], 'Illinois': ['Springfield', 'Chicago'] }, 'India': { 'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'], 'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'], 'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur'] }, 'Australia': { 'New South Wales': ['Sydney'], 'Victoria': ['Melbourne'] } }; $scope.GetSelectedCountry = function () { $scope.strCountry = document.getElementById("country").value; }; $scope.GetSelectedState = function () { $scope.strState = document.getElementById("state").value; }; $scope.GetSelectedcity = function () { $scope.strCity = document.getElementById("city").value; }; });
<!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> <p>Hello {{name}}!</p> <label for="country">Country *</label> <select id="country" ng-model="statessource" ng-options="country for (country, states) in countries" ng-change="GetSelectedCountry()"> <option value=''>Select</option> </select> <label for="state">State *</label> <select id="state" ng-disabled="!statessource" ng-model="model.state" ng-options="state for (state,city) in statessource" ng-change="GetSelectedState()"><option value=''>Select</option> </select> <label for="city">City *</label> <select id="city" ng-disabled="!model.state" ng-model="model.city" ng-options="city for city in model.state" ><option value=''>Select</option> </select> </body> </html>
Can anyone please update this code.
1 answers
solution1
0 2018-03-16 17:46:19
You can set default value to $scope.statessource in your controller after defining $scope.countries something like this $scope.statessource = $scope.countries.India; . You can remove the country dropdown if you do not want the user to change the country.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.