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 test_country and test_city with Item Name as below:

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

For test_city 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 'test_test_module' ie my custom module.

Let's make a javascript file, say test_test_module.js. I have kept this file inside custom/modules/test_test_module folder.

/***********************************************************************/

//alert('hello');
var arr;
function Check() {
if(document.EditView.test_city|| document.EditView.test_country) {
      var test_city= document.EditView.test_city.options;
      arr = new Array;
      for(i=0; i< test_city.length; i++) {
         arr.push( test_city[i].value, test_city[i].text);
      }
  }
    initData();
}
function initData(){
 var current_p= document.EditView. test_country;
 var code_p = current_p.value;
 var current_v= document.EditView.test_city;
 var code_v = current_v.value;
 var code_v_idx = 0;
 var select_ticket = document.EditView.test_city.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.test_city.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 templateMeata array in custom/modules/test_test_module/metadata/editviewdefs.php, define the location of the javascript file as below,

we can do it in two way:-

a>

'templateMeta' =>
    array (
    'includes' =>
      array (
        0 =>
        array (
          'file' =>'custom/modules/test_test_module/test_test_module.js',
        ),
      ),
      'maxColumns' => '2',
   
note : - Here only 'includes' key is important. but for better understanding extra code given above

b>

$viewdefs['test_test_module']['EditView']['templateMeta']['includes'][]['file'] = 'custom/modules/test_test_module/test_test_module.js';

last step :

In the same file i.e. editviewdefs.php, you will find dropdown menus you created i.e. test_country and test_city. Call the javascript function initdata() in test_country menu as below:

   array (
            'name' => 'test_country',
            'label' => 'LBL_AMITESH_DROPDOWN',
            '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 test_country menu.

all d best :)