Choose state and city based on country using Jquery | 2my4edge

22 June 2013

Choose state and city based on country using Jquery

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.

select-country-and-city
DOWNLOAD CODE                   LIVE DEMO                    

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. 


45 comments:

  1. thanks for posting this..useful one

    ReplyDelete
  2. thank u sir...Thanks a lot...This is Owesome job..

    ReplyDelete
  3. Thank you for this code. I will use this in my internet website...
    regards.

    gerry de leon

    ReplyDelete
  4. sir i need country state and city if u have code means plz send to ma mail id vishak384@gmail.com

    ReplyDelete
  5. Thanks..i need city drop down..could u pls post it would be very useful...

    ReplyDelete
  6. Thanks for the code..i need city drop down also..could be update the code with it.

    ReplyDelete
  7. using select id use you can get the value of option tag

    ReplyDelete
  8. ThankYOU Thank You Thank YOU very much SIR

    ReplyDelete
  9. Nice script, but how can you make it three (3)boxes

    ReplyDelete
  10. Nice code sir, but how can i use it multiple on a page.
    please advice. thank u once again

    ReplyDelete
  11. Thank you sooo much, you saved me.

    My 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.

    ReplyDelete
  12. Any way to get code for cities?

    ReplyDelete
  13. how can we selected country and state same as data base value

    ReplyDelete
  14. Any way to get code for cities?

    ReplyDelete
  15. Any way to get code for cities?

    ReplyDelete
  16. sir i need country state and city if u have code please send to my mail id sumanchitresh@gmail.com

    Reply

    ReplyDelete
  17. Thanks so much :) very Helpful :)

    ReplyDelete
  18. 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!

    ReplyDelete
  19. Thank So Much....

    ReplyDelete
  20. sir i need country state and city if u have code please send to my mail id anbuilango2@gmail.com

    ReplyDelete
  21. sir i need country state and city if u have code please send to my mail id anbuilango2@gmail.com

    ReplyDelete
  22. sir i want country state n city code if u have plz send me arpitamaniyar5630@gmail.com

    ReplyDelete
  23. Wao This is a great job,It is highly useful for me I love it thank you so much

    ReplyDelete
  24. thanku sir use properly and workink perfect

    ReplyDelete
  25. thanku sir use properly and workink perfect

    ReplyDelete
  26. can you have demo for like photo in javascript,php ?

    ReplyDelete
  27. sir,.. it will be helpful if city is also included in the above script

    ReplyDelete
  28. sir i need country state and city if u have code please send to my mail id rambabuyendru@gmail.com

    ReplyDelete
  29. hello 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

    ReplyDelete
  30. thank you, but i want to show country id in another text box, it comes like automatically to select the country

    ReplyDelete
  31. hello 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

    ReplyDelete
  32. download link is not working

    ReplyDelete
    Replies
    1. Sorry For that @JSV,

      Box account Band width limit is exceed. Copy that code, We will do the needful as soon as possible.

      Delete
  33. Download link errors are fixed. Now you can download.

    ReplyDelete
  34. sir i need country state and city if u have code please send to my mail id ankushdhiman42@gmail.com

    ReplyDelete
  35. sir i need country state and city if u have code please send to my mail id vs20101994@gmail.com

    ReplyDelete
  36. Good article... well explained!

    ReplyDelete

^