It’s for choosing state and city based on choosing the country, when we choose a country, in a second select option field will show the states, what are all presents in the country, that is the concept. Let see how it works.
like the above image sample, when we choose the country, we can automatically show, what are the state are the in the country, for that we are using this code and script.
Script
<script type="text/javascript"> var country_arr = new Array("Afghanistan", "India", "USA", "Vietnam"); var s_a = new Array(); s_a[0]=""; s_a[1]="Badakhshan|Badghis|Baghlan|Balkh|Bamian|Farah|Faryab|Ghazni|Ghowr|Helmand|Herat|Jowzjan|Kabol|Kandahar|Kapisa|Konar|Kondoz|Laghman|Lowgar|Nangarhar|Nimruz|Oruzgan|Paktia|Paktika|Parvan|Samangan|Sar-e Pol|Takhar|Vardak|Zabol"; s_a[2]="Andhra Pradesh|Arunachal Pradesh|Assam|Bihar|Chhattisgarh|Goa|Gujarat|Haryana|Himachal Pradesh|Jammu and Kashmir|Jharkhand|Karnataka|Kerala|Madhya Pradesh|Maharashtra|Manipur|Meghalaya|Mizoram|Nagaland|Odisha(Orissa)|Punjab|Rajasthan|Sikkim|Tamil Nadu|Tripura|Uttar Pradesh|Uttarakhand|West Bengal"; s_a[3]="Alabama|Alaska|Arizona|Arkansas|California|Colorado|Connecticut|Delaware|Florida|Georgia|Hawaii|Idaho|Illinois|Indiana|Iowa|ansas|Kentucky|Louisiana|Maine|Maryland|Massachusetts|Michigan|Minnesota|Mississippi|Missouri|Montana|Nebraska|Nevada|New Hampshire|New Jersey|New Mexico|New York|North Carolina|North Dakota|Ohio|Oklahoma|Oregon|Pennsylvania|Rhode Island|South Carolina|South Dakota|Tennessee|Texas|Utah|Vermont|Virginia|Washington|West Virginia|Wisconsin|Wyoming"; s_a[4]="Ba Ria|Bạc Liêu|Bắc Giang|Bắc Ninh|Bảo Lộc|Biên Hòa|Bến Tre|Buôn Ma Thuột|Cà Mau|Cam Pha|Cao Lãnh|Đà Lạt|Điện Biên Phủ|Đông Hà|Đồng Hới|Hà Tĩnh|Hạ Long|Hải Dương|Hòa Bình|Hội An|Huế|Hưng Yên|Kon Tum|Lạng Sơn|Lào Cai|Long Xuyên|Móng Cái|Mỹ Tho|Nam Định|Ninh Bình|Nha Trang|Cam Ranh|Phan Rang-Tháp Chàm|Phan Thiết|Phủ Lý|Pleiku|Quảng Ngãi|Quy Nhơn|Rạch Giá|Sóc Trăng|Sơn La|Tam Kỳ|Tân An|Thái Bình|Thái Nguyên|Thanh Hóa|Trà Vinh|Tuy Hòa|Tuyen Quang|Uong Bi|Việt Trì|Vinh|Vĩnh Yên|Vĩnh Lon|Vũng Tàu|Yên Bái"; function print_country(country){ //given the id of the <select> tag as function argument, it inserts <option> tags var option_str = document.getElementById(country); option_str.length=0; option_str.options[0] = new Option('Select Country',''); option_str.selectedIndex = 0; for (var i=0; i<country_arr.length; i++) { option_str.options[option_str.length] = new Option(country_arr[i],country_arr[i]); } } function print_state(state, selectedIndex){ var option_str = document.getElementById(state); option_str.length=0; // Fixed by Julian Woods option_str.options[0] = new Option('Select State',''); option_str.selectedIndex = 0; var state_arr = s_a[selectedIndex].split("|"); for (var i=0; i<state_arr.length; i++) { option_str.options[option_str.length] = new Option(state_arr[i],state_arr[i]); } } </script>
the above script is sample script of select state based on country, when we select the country, that will show the second dropdown select box will show the states, the above is script,
Program
Select the Country : <select onchange="print_state('state',this.selectedIndex);" id="country" name ="country"></select> <br /> State in the above country : <select name ="state" id ="state"></select> <script language="javascript">print_country("country");</script>
that's it, enjoy with the demo.
thanks for posting this..useful one
ReplyDeleteReally nice tutorial
Deletethanks lot sago...!!!
ReplyDeletethank u sir...Thanks a lot...This is Owesome job..
ReplyDeleteThank you for this code. I will use this in my internet website...
ReplyDeleteregards.
gerry de leon
sir i need country state and city if u have code means plz send to ma mail id vishak384@gmail.com
ReplyDeletehow to get options values
ReplyDeleteThanks. very useful..
ReplyDeleteThanks..i need city drop down..could u pls post it would be very useful...
ReplyDeleteThanks for the code..i need city drop down also..could be update the code with it.
ReplyDeleteghanta
ReplyDeleteusing select id use you can get the value of option tag
ReplyDeleteThankYOU Thank You Thank YOU very much SIR
ReplyDeleteNice script, but how can you make it three (3)boxes
ReplyDeleteNice code sir, but how can i use it multiple on a page.
ReplyDeleteplease advice. thank u once again
Thank you sooo much, you saved me.
ReplyDeleteMy next approach for this is to either explode your data in the js to migrate countries and cities to my database or find a countries and cities database and format the data same to your js.
Anyways, thanks a lot.
Any way to get code for cities?
ReplyDeletehow can we selected country and state same as data base value
ReplyDeleteAny way to get code for cities?
ReplyDeleteAny way to get code for cities?
ReplyDeletesir i need country state and city if u have code please send to my mail id sumanchitresh@gmail.com
ReplyDeleteReply
Thanks so much :) very Helpful :)
ReplyDeletethaks
ReplyDeletesiva
Great tool! I've been looking for something like this that isn't too complicated to understand and set up. I can edit the code myself and it works great!!! Thank you!
ReplyDeleteThank So Much....
ReplyDeletesir i need country state and city if u have code please send to my mail id anbuilango2@gmail.com
ReplyDeletesir i need country state and city if u have code please send to my mail id anbuilango2@gmail.com
ReplyDeletesir i want country state n city code if u have plz send me arpitamaniyar5630@gmail.com
ReplyDeletethanks
ReplyDeleteWao This is a great job,It is highly useful for me I love it thank you so much
ReplyDeletethanku sir use properly and workink perfect
ReplyDeletethanku sir use properly and workink perfect
ReplyDeletethanks a lot
ReplyDeletecan you have demo for like photo in javascript,php ?
ReplyDeletesir,.. it will be helpful if city is also included in the above script
ReplyDeletesir i need country state and city if u have code please send to my mail id rambabuyendru@gmail.com
ReplyDeletehello sir it,s great tutorail but how i will store this is in database it,s doesn,t have value like option value="anything"option
ReplyDeletethank you, but i want to show country id in another text box, it comes like automatically to select the country
ReplyDeletehello firstly i appircite i need some thing from you so could you help me.i want to develop web appliaction so what is the tools that used to good webisites .thanks you so much for your volentry
ReplyDeletedownload link is not working
ReplyDeleteSorry For that @JSV,
DeleteBox account Band width limit is exceed. Copy that code, We will do the needful as soon as possible.
Download link errors are fixed. Now you can download.
ReplyDeletesir i need country state and city if u have code please send to my mail id ankushdhiman42@gmail.com
ReplyDeletesir i need country state and city if u have code please send to my mail id vs20101994@gmail.com
ReplyDeleteGood article... well explained!
ReplyDelete