• HTML
• CSS
• JS

HTML

<div class="container">
    <div class="item">
        <label for="depart">Departamento</label>
        <select class="depart" id="depart"></select>
    </div>
    <div class="item">
        <label for="provin">Provincia</label>
        <select class="provin" id="provin"></select>
    </div>
    <div class="item">
        <label for="distri">Distrito</label>
        <select class="distri" id="distri"></select>
    </div>
</div>

CSS

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    font-family:sans-serif;
    background: #55e4fc;
    background: linear-gradient(to right, #55e4fc 0%, #0162c8 100%);

}
.container{
    display:flex;
    gap:20px;
    
}
.container .item{
    display:flex;
    flex-direction:column;
}
.container .item label{
    color:#fff;
    padding-bottom:0.5em;
}
.container .item select{
    width:14em;
    height:2.5em;
    padding-left:15px;
    font-size:16px;
    border:1.9px solid lightgray;
    border-radius:4px;
    color:#39325A;
    outline:none;
    cursor:pointer;
}

JS

let departamento = document.querySelector('.depart');
let provincia    = document.querySelector('.provin');
let distrito     = document.querySelector('.distri');

let departs = ['Cusco','Arequipa',];
let provics = ['Espinar','Acomayo','Canchis','Camaná','Caravelí','Castilla'];
let distris = ['Yauri','Condoroma','Ocoruro','Acopía','Sangarará','Acos','Sicuani','Checacupe','San Pedro','Nicolás de Piérola','Ocoña','Quilca','Chalas','Jaqui','Lomas','Andahua','Aplao','Ayo'];

function crearSelect(array,select){
    let options = '<option selected disabled>Select</option>';
    for(let i=0;i < array.length;i++){
        options += `<option value="${array[i]}">${array[i]}</option>`; 
    }
    select.innerHTML = options;
}

crearSelect(departs,departamento);

function mostrarSelect(array,inicio,final,destino){
    let recortar = array.slice(inicio,final);
    crearSelect(recortar,destino);
}

departamento.addEventListener('change',function(){
    
   let valor = this.value;
   
   switch(valor){
        case 'Cusco':
            mostrarSelect(provics,0,3,provincia);
        break;
        case 'Arequipa':
            mostrarSelect(provics,3,6,provincia);
        break;
   }
   
   distrito.innerHTML = '';
   
});

provincia.addEventListener('change',function(){
    
   let valor = this.value;
   
   switch(valor){
        case 'Espinar':
            mostrarSelect(distris,0,3,distrito);
        break;
        case 'Acomayo':
            mostrarSelect(distris,3,6,distrito);
        break;
        case 'Canchis':
            mostrarSelect(distris,6,9,distrito);
        break;
        case 'Camaná':
            mostrarSelect(distris,9,12,distrito);
        break;
        case 'Caravelí':
            mostrarSelect(distris,12,15,distrito);
        break;
        case 'Castilla':
            mostrarSelect(distris,15,18,distrito);
        break;
   }
   
});