Dependent Dropdown in SugarCRM (SugarCE)

In order to make dependent dropdown, first you need to create 2 independent dropdown list from sugar admin panel. Let's say country_c and city_c with Item Name as below:

For country_c menu:
Item Name                    Display Name
AAA                             Thailand
BBB                              Nepal

For city_c menu:
Item Name                   Display Name
AAA_1                        Bangkok
AAA_2                        Phuket
BBB_1                         Lumbini
BBB_2                         Pokhara

Here you can see that if Item Name for country is AAA then the corresponding Item Name for city is AAA_1, AAA_2 i.e. it starts with AAA.

Now, add these dropdown fields in the corresponding edit view and detail view.
I am making dependent dropdown for 'contact' module.

Let's make a javascript file, say Contact.js. I have kept this file inside custom/modules/Contacts folder.
------------------------------------------------------------------------------------------------------------
var arr;
function Check() {
  if(document.EditView.city_c || document.EditView. country_c  ) {
var  city_c = document.EditView.city_c.options;
arr = new Array;
for(i=0; i< city_c.length; i++) {
arr.push( city_c[i].value,  city_c[i].text);
}
  }
initData();
}
function initData(){
var current_p= document.EditView. country_c  ;
var code_p = current_p.value;
var current_v= document.EditView.city_c;
var code_v = current_v.value;
var code_v_idx = 0;
var select_ticket = document.EditView.city_c.options;
select_ticket.length=0;
var l = 0;

  for(k=0; k<arr.length; k+=2) {
    if(arr[k].substr(0,3) == code_p || arr[k] == '') {
       select_ticket.length++;
       select_ticket[select_ticket.length-1].value = arr[k];
       select_ticket[select_ticket.length-1].text = arr[k+1];
       if(code_v == arr[k]){
code_v_idx = l;
       }
        l++;
    }
}
if(code_p == ''){
select_ticket[select_ticket.length-1].value = '';
select_ticket[select_ticket.length-1].text = 'Select from DD1';
}
document.EditView.city_c.selectedIndex = code_v_idx;
}
if (window.addEventListener){
window.addEventListener("load", Check, false);
} else if (window.attachEvent){
window.attachEvent("onload", Check);
} else if (document.getElementById){
window.onload=Check;
}
------------------------------------------------------------------------------------------------------------
Inside form array in custom/modules/Contacts/metadata/editviewdefs.php, define the location of the javascript file as below,
 'includes' =>
      array (
        0 =>
        array (
          'file' => 'custom/modules/Contacts/Contact.js',
        ),
    ),
In the same file i.e. editviewdefs.php, you will find dropdown menus you created i.e. country_c and city_c. Call the javascript function initdata() in country_c menu as below:
          array (
            'name' => 'country_c',
            'studio' => 'visible',
            'label' => 'LBL_COUNTRY',
   'displayParams' =>
array (
              'javascript' => 'onchange="initData();"',
            ),
          ),
Since you want to change the value of city when the value of country is changed, you need to call the javascript function only from the country_c menu.

This tutorial is created with reference to the french tutorial:
http://dl.sugarforge.org/francais/3-DocumentationsenFranais/GuidespourDveloppeurs/Combos_Liees_dans_SugarCRM_V1.2.pdf

Any questions or suggestions are welcome.