Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SalocinDotTEN/ebee2d1532944d9793c5 to your computer and use it in GitHub Desktop.
Save SalocinDotTEN/ebee2d1532944d9793c5 to your computer and use it in GitHub Desktop.
Javascript to associate a dropdown select menu of Malaysian states with their districts and cities based on the "id" attribute. How to use? print_city("id" tag of select, this.value); similar for state_short_print_city();
// Based on http://www.2my4edge.com/2013/06/choose-state-and-city-based-on-country.html
// Done for a client project but now open sourced under Creative Commons. http://creativecommons.org/licenses/by-sa/4.0/
// District lists
var districts = new Array();
districts[''] = "";
districts['Johor'] = "Batu Pahat|Johor Bahru|Kluang|Kota Tinggi|Mersing|Muar|Pontian|Segamat|Kulaijaya|Ledang";
districts['Kedah'] = "Baling|Bandar Baharu|Kota Setar|Kuala Muda|Kubang Pasu|Kulim|Pulau Langkawi|Padang Terap|Pendang|Pokok Sena|Sik|Yan";
districts['Kelantan'] = "Bachok|Gua Musang|Jeli|Kota Baharu|Kuala Krai|Machang|Pasir Mas|Pasir Puteh|Tanah Merah|Tumpat";
districts['Kuala Lumpur'] = "Kuala Lumpur";
districts['Melaka'] = "Alor Gajah|Melaka Tengah|Jasin";
districts['Negeri Sembilan'] = "Jelebu|Jempol|Kuala Pilah|Port Dickson|Rembau|Seremban|Tampin";
districts['Pahang'] = "Bentong|Bera|Cameron Highlands|Jerantut|Kuantan|Lipis|Maran|Pekan|Raub|Rompin|Temerloh";
districts['Pulau Pinang'] = "Penang Timur Laut|Penang Barat Daya|Seberang Perai Utara|Seberang Perai Tengah|Seberang Perai Selatan";
districts['Perak'] = "Batang Padang|Hilir Perak|Hulu Perak|Kerian|Kinta|Kuala Kangsar|Larut, Matang|Selama|Manjung|Perak Tengah";
districts['Perlis'] = "Perlis";
districts['Sabah'] = "Interior Division|Kudat|Sandakan|Tawau|West Coast|Labuan";
districts['Sarawak'] = "Betong|Bintulu|Kapit|Kuching|Limbang|Miri|Mukah|Samarahan|Sarikei|Sibu|Sri Aman";
districts['Selangor'] = "Gombak|Hulu Langat|Hulu Selangor|Klang|Kuala Langat|Kuala Selangor|Petaling|Sabak Bernam|Sepang/Putrajaya";
districts['Terengganu'] = "Besut|Dungun|Hulu Terengganu|Kemaman|Kuala Terengganu|Marang|Setiu";
// City lists
var cities = new Array();
cities[''] = "";
cities['Johor'] = "Batu Pahat|Johor Bahru|Kluang|Kota Tinggi|Kulai/Kulaijaya|Ledang|Muar|Mersing|Nusajaya|Pasir Gudang|Pontian|Segamat";
cities['Kedah'] = "Alor Setar|Baling|Jitra|Kuala Kedah|Kulim|Langkawi|Pendang|Pokok Sena|Sungai Petani|Sik|Yan";
cities['Kelantan'] = "Kota Bharu|Pasir Mas|Tumpat|Pasir Puteh|Bachok|Kuala Krai|Machang|Tanah Merah|Jeli|Gua Musang";
cities['Kuala Lumpur'] = "Kuala Lumpur";
cities['Melaka'] = "Alor Gajah|Bandaraya Melaka|Jasin";
cities['Negeri Sembilan'] = "Jelebu|Jempol|Kuala Pilah|Nilai|Port Dickson|Rembau|Seremban|Seremban 2|Tampin";
cities['Pahang'] = "Bandar Bera|Bentong|Cameron Highlands|Fraser\'s Hill|Genting Highlands|Jerantut|Kuantan|Kuala Lipis|Kuala Rompin|Maran|Pekan|Raub|Temerloh";
cities['Perak'] = "Batu Gajah|Gerik|Ipoh|Kampar|Kuala Kangsar|Parit Buntar|Seri Iskandar|Seri Manjung|Sitiawan|Tanjung Malim|Tapah|Teluk Intan|Taiping";
cities['Perlis'] = "Arau|Beseri|Chuping|Kaki Bukit|Kangar|Kuala Perlis|Mata Ayer|Padang Besar|Sanglang|Simpang Empat|Wang Kelian";
cities['Pulau Pinang'] = "Balik Pulau|Bukit Mertajam|Kepala Batas|Sg Jawi|Georgetown";
cities['Sabah'] = "Keningau|Kota Kinabalu|Sandakan|Kudat|Tawau|Labuan";
cities['Sarawak'] = "Betong|Bintulu|Kapit|Kuching|Labuan|Limbang|Miri|Mukah|Samarahan|Sarikie|Sibu|Sri Aman";
cities['Selangor'] = "Ampang|Banting|Bangi|Cheras|Kajang|Klang/Port Klang|Kuala Kubu Bharu/Hulu Selangor|Kuala Selangor|Petaling Jaya|Rawang|Sabak Bernam|Selayang|Sepang/Putrajaya|Seri Kembangan|Shah Alam|Subang Jaya";
cities['Terengganu'] = "Jerteh/Kg Raja|Kuala Dungun|Kuala Berang|Kemaman/Chukai|Kuala Nerus|Kuala Terengganu|Marang|Bandar Permaisuri";
function print_city(eleID, selectedIndex){
var option_str = document.getElementById(eleID);
option_str.length=0; // Fixed by Julian Woods
option_str.options[0] = new Option('-- Select City --','');
option_str.selectedIndex = 0;
var city_arr = cities[selectedIndex].split("|");
for (var i=0; i<city_arr.length; i++) {
option_str.options[option_str.length] = new Option(city_arr[i],city_arr[i]);
}
}
//This is for those features who have short forms as states.
function state_short_print_city(selectID, selectInd) {
var stateShort = new Array();
stateShort['-1'] = "";
stateShort['KL'] = "Kuala Lumpur";
stateShort['JH'] = "Johor";
stateShort['KH'] = "Kedah";
stateShort['KN'] = "Kelantan";
stateShort['LB'] = "Labuan";
stateShort['ME'] = "Melaka";
stateShort['NS'] = "Negeri Sembilan";
stateShort['PG'] = "Penang";
stateShort['PH'] = "Pahang";
stateShort['PK'] = "Perak";
stateShort['PL'] = "Perlis";
stateShort['PY'] = "Putrajaya";
stateShort['SA'] = "Sabah";
stateShort['SK'] = "Sarawak";
stateShort['SL'] = "Selangor";
stateShort['TE'] = "Terengganu";
print_city(selectID, stateShort[selectInd]);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment