how to select country, state dropdown box in angularjs

Question

select in country automatically displayed in that states in drop down list using angularjs

suraj ghosi · Answer

use below code . i hope its helpful for you 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 type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" > function CountryStateCityCtnl ( $ scope ) { $ scope . countries = { 'India' : { 'Maharashtra' : [ 'Pune' , 'Mumbai' , 'Nagpur' , 'Akola' ] , 'Madhya Pradesh' : [ 'Indore' , 'Bhopal' , 'Jabalpur' ] , 'Rajasthan' : [ 'Jaipur' , 'Ajmer' , 'Jodhpur' ] } , 'USA' : { 'Alabama' : [ 'Montgomery' , 'Birmingham' ] , 'California' : [ 'Sacramento' , 'Fremont' ] , 'Illinois' : [ 'Springfield' , 'Chicago' ] } , '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 ; } ; } div ng - controller = "CountryStateCityCtnl" > div > Country : select id = "country" ng - model = "statessource" ng - options = "country for (country, states) in countries" ng - change = "GetSelectedCountry()" > option value = '' > Select / option > / select > / div > div style = 'height: 15px;' > & nbsp ; / div > div > States : select id = "state" ng - disabled = "!statessource" ng - model = "citiessource" ng - options = "state for (state,city) in statessource" ng - change = "GetSelectedState()" > option value = '' > Select / option > / select > / div > div style = 'height: 15px;' > & nbsp ; / div > div > City : select id = "city" ng - disabled = "!citiessource || !statessource" ng - model = "city" > option value = '' > Select / option > option ng - repeat = "city in citiessource" value = '{{city}}' > { { city } } / option > / select > / div > div style = 'height: 15px;' > & nbsp ; / div > div > span > Selected Country : / span > label > { { strCountry } } / label > / div > div style = 'height: 15px;' > & nbsp ; / div > div > span > Selected State : / span > label > { { strState } } / label > / div > div style = 'height: 15px;' > & nbsp ; / div > div > span > Selected City : / span > label > { { city } } / label > / div > / div >

how to select country, state dropdown box in angularjs

Answers (1)