Dropdown populating/creating checkboxes

Im trying to create some checkboxes based on the selected dropdown options, but seems it not working and not even creating the checkbox. And im getting confused, when/where/how i call the js with this function

/controller/file_upload.php

public function index() {
    $this->load->helper(array('form', 'url', 'html'));
    $this->load->view('template/header_view.php');
    $this->load->view('template/sidebar_view.php');
    $this->load->view('fileupload_view');

}

function getSelected() {
    $this->load->model('file_upload_model');
    $permission = $this->input->get('permission', TRUE);
    if ($permission == "seksi") {
        $permission_data = $this->file_upload_model->getSeksi();
    } else if($permission == "unit") {
        $permission_data['option_list'] = $this->file_upload_model->getUnit();
        echo json_encode($permission_data);
    }
}

/model/file_upload_model.php

function getSeksi() {
    $seksi['description'] = array('Seksi Konservasi','Kelompok Jabatan Fungsional', 'Tata Usaha');
    $seksi['abr'] = array('konservasi', 'kjf', 'tu');
    return $seksi;
}

function getUnit() {
    $unit = array('Unit Registrasi', 'Unit Pemeliharaan', 'Unit Pembibitan', 'Unit Kepegawaian', 'Unit Jasa dan Informasi', 'Unit Keuangan', 'Unit Umum');
    return $unit;
}

the view

<?php 
        $permission_options = array('semua'=>'Semua', 'seksi'=>'Seksi', 'unit'=>'Unit', 'individu'=>'Individu', 'pribadi'=>'Pribadi');
        $permission_attributes = 'aria-expanded="false" data-toggle="dropdown" class="dropdown-toggle" id="permission"';
        echo form_dropdown('permission', $permission_options, 'pribadi', $permission_attributes);
?>

codeigniter/asset/js/dropdown.js

(function() {
var httpRequest;
dropper = document.getElementById("statedrop");
dropper.onchange = function() { 
//alert(dropper.value);
makeRequest('http://localhost:8080/codeigniter/index.php/file_upload/ajaxdrop?state=' + dropper.value); 
};

function makeRequest(url) {
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
        httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
        try {
            httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } 
        catch (e) {
            try {
                httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } 
            catch (e) {}
        }
    }

    if (!httpRequest) {
        alert('Giving up :( Cannot create an XMLHTTP instance');
        return false;
    }
    httpRequest.onreadystatechange = alertContents;
    httpRequest.open('GET', url);
    httpRequest.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 
    httpRequest.send();
}

function alertContents() {
    if (httpRequest.readyState === 4) {
        if (httpRequest.status === 200) {
            var permission_data = JSON.parse(httpRequest.response);
            var select = document.getElementById('permission');
            if(emptySelect(select)){
                for (var i = 0; i < permission_data.abr.length; i++){
                    var el = document.createElement("INPUT");
                    el.setAttribute("type", "checkbox");
                    el.value = permission_data.abr[i];
                    document.write(permission_data.description[i]);
                    var br = document.createElement("BR");
                    document.write(br);

                }
            }
        } else {
            alert('There was a problem with the request.');
        }
    }
}

function emptySelect(select_object){
    while(select_object.options.length > 0){                
        select_object.remove(0);
    }
    return 1;
}
})();

any suggestion about the mechanism how i should do it (even if its completely different, as long as it achieve the objectives), or anything would be welcomed.