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. 


20 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