Why do not you show me a Select when I add styles and js?

I have a small exercise that I was doing to make nested selects (Department-Province-District) connected to a bd in oracle. all right up there but when I entered styles and js to my index when compiling it only showed me the data of my first Select (department) but no longer of the others. I attach my code:

Ajax Code:

 function getXMLHTTPRequest() {
    try {
        req = new XMLHttpRequest();
    } catch(err1) {
    try {
        req = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (err2) {
    try {
        req = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (err3) {
        req = false;
        }
    }
    }
    return req;
}

var http = getXMLHTTPRequest(); // creo una instancia del objeto XMLHTTPRequest.

function elegirdepartamento(n_dep){
    var ele1=n_dep;
    var url = 'cargarselects.jsp?ele1='+ele1; // creacion de la URL.
    http.open("GET", url, true); // fijando los parametros para el envio de datos.
    http.onreadystatechange = handler1; // Quee funcion utilizar en caso de que el estado de la peticion cambie.
    http.send(null); // enviar peticion.
}

function handler1() {
    if (http.readyState == 4) {
        if(http.status == 200) {
            provincia.innerHTML="";
            provincia.innerHTML=provincia.innerHTML+http.responseText;
        }
    }
}

function elegirprovincia(n_prov){
    var ele2=n_prov;
    var url = 'cargarselects2.jsp?ele2='+ele2; // creacion de la URL.
    http.open("GET", url, true); // fijando los parametros para el envio de datos.
    http.onreadystatechange = handler2; // Quee funcion utilizar en caso de que el estado de la peticion cambie.
    http.send(null); // enviar peticion.
}

function handler2() {
    if (http.readyState == 4) {
        if(http.status == 200) {
            distrito.innerHTML="";
            distrito.innerHTML=distrito.innerHTML+http.responseText;
        }
    }
}

Code "cargaselects" where I refer in my ajax:

<%
    Conexion con=new Conexion();
    ResultSet res = null;   
    Statement sen= con.getConexion();
    String n_dep = request.getParameter("ele1");
    System.out.print("Departamento seleccionado : "+n_dep+"\n");
    String provinciacon ="SELECT UNIQUE(n_prov) from ocex_uea WHERE n_dep like '"+n_dep+"%' ORDER BY n_prov asc";
    ResultSet rtprpovincia=sen.executeQuery(provinciacon);
%>

<select name="provincia" required>
<option selected value="0" >[PROVINCIA]</option> 
<% while(rtprpovincia.next()){ 
System.out.println("Provinvia: "+rtprpovincia.getString(1));
%>
<option value="<%=rtprpovincia.getString(1)%>"><%=rtprpovincia.getString(1)%></option>
<%} %>  
</select>

This is my index without loading the styles and js:

<label>Departamento de Residencia </label>
<br>
<select name="departamento" id="departamento" onChange="elegirdepartamento(this.value)" required>

<option selected value="0">[DEPARTAMENTO]</option>
<%
Conexion con=new Conexion();
Statement sen= con.getConexion();
String sql="SELECT unique(n_dep) FROM ocex_uea ORDER BY n_dep asc";
ResultSet resdpto=sen.executeQuery(sql);
while(resdpto.next()){
resdpto.getNString(1);
%>
<option value="<%=resdpto.getNString(1)%>"><%=resdpto.getNString(1)%></option>
<%} %>
</select>

<br>
<br>

<label>Provincia de Residencia </label>
<select name="provincia" id="provincia" onChange="elegirprovincia(this.value)" required>
<option selected value="0">[PROVINCIA] </option>
</select>

<br>
<br>

<label>Distrito de Residencia </label>
<select name="distrito" id="distrito"  onchange="elegirdistrito(this.value)" required>
<option selected value="0">[DISTRITO] </option>
</select>

To add my styles and js I put this:

<link href="css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection">
<link href="css/style.min.css" type="text/css" rel="stylesheet" media="screen,projection">
<link href="css/custom/custom.min.css" type="text/css" rel="stylesheet" media="screen,projection">
<link href="js/plugins/prism/prism.css" type="text/css" rel="stylesheet" media="screen,projection">
<link href="js/plugins/perfect-scrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet" media="screen,projection">
<link href="js/plugins/chartist-js/chartist.min.css" type="text/css" rel="stylesheet" media="screen,projection">

<script type="text/javascript" src="js/uea_ajax.js"></script>
<script type="text/javascript" src="js/plugins/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/plugins/prism/prism.js"></script>
<script type="text/javascript" src="js/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/plugins.min.js"></script>
<script type="text/javascript" src="js/custom-script.js"></script>
<script type="text/javascript" src="js/jsquery/jquery-ui.js"></script>
<script type="text/javascript" src="js/plugins/chartist-js/chartist.min.js"></script> 

And after I add this and run it, it does not show the data in the select (province, district). Any help on what's happening, thanks.