Cascading Dropdown

function fillCustomer(){
/*------ Empty later dropdowns -----*/
var arrTemp =[] /*---- empty array ----*/

{dialog.Object}.populateDropdownBox('SITE',arrTemp,true);
{dialog.Object}.populateDropdownBox('SHOP',arrTemp,true);
{dialog.Object}.populateDropdownBox('AREA_NAME',arrTemp,true);

/*------ Clear area_id ----------*/
{dialog.Object}.setValue('AREA_ID','' )

var listData = {dialog.Object}.getListData('AREA_LOOKUP');

var i = null;
for (i = 0; listData.length > i; i += 1) {
    arrTemp.push(listData[i].customer);
}
var arrCust = arrTemp.filter(function (value, index, self) {
    return self.indexOf(value) === index;
  })
/*----- Add select text ------*/
arrCust.splice(0, 0, '<Select Customer>');
{dialog.Object}.populateDropdownBox('CUSTOMER',arrCust,true);
/*--- set to select text ----*/
setTimeout(function(){{dialog.Object}.setValue('CUSTOMER','<Select Customer>',false )} ,10);
}

function fillSite(){
/*------ Empty later dropdowns -----*/
var arrTemp =[] /*---- empty array ----*/

{dialog.Object}.populateDropdownBox('SHOP',arrTemp,true);
{dialog.Object}.populateDropdownBox('AREA_NAME',arrTemp,true);
/*------ Clear area_id ----------*/
{dialog.Object}.setValue('AREA_ID','' )

/*------- Fill this dropdown if there is parent data ----*/

var customer = {dialog.Object}.getValue('CUSTOMER');
if(customer!=''&&customer!='<Select Customer>'){
    var listData = {dialog.Object}.getListData('AREA_LOOKUP');

    var i = null;
    for (i = 0; listData.length > i; i += 1) {
        if (listData[i].customer == customer){
        arrTemp.push(listData[i].site);
        }
    }
    var arrSite = arrTemp.filter(function (value, index, self) {
        return self.indexOf(value) === index;
      })
       /*----- Add select text ------*/
        arrSite.splice(0, 0, '<Select Site>');

    {dialog.Object}.populateDropdownBox('SITE',arrSite,true);
    /*--- set to select text ----*/
    setTimeout(function(){{dialog.Object}.setValue('SITE','<Select Site>',false )} ,10);

    } else {
    {dialog.Object}.populateDropdownBox('SITE',arrTemp,true)
    }
}
function fillShop(){
/*------ Empty later dropdowns -----*/
var arrTemp =[] /*---- empty array ----*/
{dialog.Object}.populateDropdownBox('AREA_NAME',arrTemp,true);
/*------ Clear area_id ----------*/
{dialog.Object}.setValue('AREA_ID','' )

/*------- Fill this dropdown if there is parent data ----*/
var customer = {dialog.Object}.getValue('CUSTOMER');
var site = {dialog.Object}.getValue('SITE');
if(customer!=''&&site!=''&&site!='<Select Site>'){
    var listData = {dialog.Object}.getListData('AREA_LOOKUP');
    var arrTemp =[]

    var i = null;
    for (i = 0; listData.length > i; i += 1) {
        if (listData[i].customer == customer&&listData[i].site==site){
        arrTemp.push(listData[i].shop);
        }
    }
    var arrShop = arrTemp.filter(function (value, index, self) {
        return self.indexOf(value) === index;
      })
       /*----- Add select text ------*/
        arrShop.splice(0, 0, '<Select Shop>');
    {dialog.Object}.populateDropdownBox('SHOP',arrShop,true);
    /*--- set to select text ----*/
    setTimeout(function(){{dialog.Object}.setValue('SHOP','<Select Shop>',false )} ,10);

    } else {
    {dialog.Object}.populateDropdownBox('SHOP',arrTemp,true);
    }
}

function fillArea(){
/*------ Empty later dropdowns -----*/
var arrTemp =[] /*---- empty array ----*/
{dialog.Object}.populateDropdownBox('AREA_NAME',arrTemp,true);
/*------ Clear area_id ----------*/
{dialog.Object}.setValue('AREA_ID','' )

/*------- Fill this dropdown if there is parent data ----*/
var customer = {dialog.Object}.getValue('CUSTOMER');
var site = {dialog.Object}.getValue('SITE');
var shop = {dialog.Object}.getValue('SHOP');
if(customer!=''&&site!=''&&shop!=''&&shop!='<Select Shop>'){
    var listData = {dialog.Object}.getListData('AREA_LOOKUP');
    var arrTemp =[]

    var i = null;
    for (i = 0; listData.length > i; i += 1) {
        if (listData[i].customer == customer&&listData[i].site==site&&listData[i].shop==shop){
        /*------ Local array for display name / stored name -------*/
        arrV = [listData[i].area_name,listData[i].area_id]

        arrTemp.push(arrV);
        }
    }
    var arrArea = arrTemp.filter(function (value, index, self) {
        return self.indexOf(value) === index;
      })
       /*----- Add select text ------*/
    arrV = ['<Select Area>','0']
    arrArea.splice(0, 0, arrV);

    {dialog.Object}.populateDropdownBox('AREA_NAME',arrArea,false);
    /*--- set to select text ----*/
    setTimeout(function(){{dialog.Object}.setValue('AREA_NAME','0',false )} ,10);
    } else {
    {dialog.Object}.populateDropdownBox('AREA_NAME',arrTemp,true);
    }
}