populate a dropdown according to the selection in another dropdown

                      Suppose two dropdowns as dropdown1 andropdown2. I need to populate the dropdown2 with different values based on the selection in dropdown1. Following shows the two dropdown menus

<select class=" form-control" id="dropdown1">
    <option>--Select--</option>
    <option>Customer</option>
    <option>Staff Member</option>
</select>

<select class=" form-control" id="dropdown2" >
    <option value="None">None</option>
</select>

                    Following javascript code works fine. Values to be populated to dropdown2 are taken into two arrays. Switch statement is used to decide which array is to be populated based on the dropdown1 selection.

                     the function createFunction() will build up the <option> elements in the dropdown1 menu.  

function configureDropDownLists(ddl1,ddl2) {
    var customer= ['None','Name', 'Registered Period', 'Area'];
    var staff = ['None','Designation', 'Department', 'Branch'];


    switch (ddl1.value) {
        case 'Customer':
            ddl2.options.length = 0;
            for (i = 0; i < customer.length; i++) {
                createOption(ddl2, customer[i], customer[i]);
            }
            break;
        case 'Staff Member':
            ddl2.options.length = 0;
            for (i = 0; i < staff.length; i++) {
                createOption(ddl2, staff[i], staff[i]);
            }
            break;

        default:
            ddl2.options.length = 0;
            break;
    }

}

function createOption(ddl, text, value) {
    var opt = document.createElement('option');
    opt.value = value;
    opt.text = text;
    ddl.options.add(opt);
}

 Finally configureDropDownLists(ddl1,ddl2)  function is called on 

the dropdown1 menu as shown menu

<select class=" form-control" id="selectCustomer"    onchange="configureDropDownLists(this,document.getElementById('filterOption'))">
     

    <option>--Select--</option>
    <option>Customer</option>
    <option>Staff Member</option>
</select>