Llenar un select en base a otro select (usando el evento onchange)

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1>Registro de usuario</h1>
    
    <form>
      <select id="carrera" name="carrera" class="form-control">
        <option value="0">Elija carrera</option>
        <option value="taller1.txt">Taller 1</option>
        <option value="seguridad.txt">Seguridad informatica</option>
        <option value="diseno.txt">Diseño web</option>
      </select>
      <select id="materia" name="materia" class="form-control">
        <option>---</option>
      </select>
    </form>
    <script src="script.js"></script>
  </body>

</html>

var carrera = document.querySelector('#carrera');
var materias = document.querySelector('#materia');

carrera.onchange = mandoCarrera;

function llenarMaterias(mat){
  limpiarMaterias();
  for (var i = 0; i < mat.length; i++) {
    var option = document.createElement("option");
    option.text = mat[i];
    materias.add(option);
  }
}

function limpiarMaterias(){
  console.log(materias);
  /*for (var i = 0; i < mat.length; i++) {
    materias.remove(i);
    console.log(i);
  }*/
  
  materias.options.length = 0;
  
}

function reciboMaterias(respuesta){
  var indice = carrera.selectedIndex;
  console.log(indice);
  
  if(carrera.options[indice].value === 'taller1.txt'){
    var arMaterias = respuesta.split(",");
    console.log(arMaterias);
    llenarMaterias(arMaterias);
  } 
  else if (carrera.options[indice].value === 'seguridad.txt'){
    var arMaterias = respuesta.split(",");
    console.log(arMaterias);
    llenarMaterias(arMaterias);
  } 
  else if(carrera.options[indice].value === 'diseno.txt') {
    var arMaterias = respuesta.split(",");
    console.log(arMaterias);
    llenarMaterias(arMaterias);
  }
  else {
    limpiarMaterias();
    
    var option = document.createElement("option");
    option.text = '---';
    materias.add(option);
  }
}

function mandoCarrera(){
  var ajax = new XMLHttpRequest();
  var indice =  carrera.selectedIndex;
  if(indice != '0'){
    ajax.open('GET', carrera.options[indice].value);
    
    ajax.onreadystatechange = function(){
      console.log(ajax.status, ajax.readyState, ajax.responseText);
      if( ajax.status === 200 && ajax.readyState === 4 ){
        reciboMaterias(ajax.responseText);
      }
    }
    
    ajax.send();
  }
  else{
    reciboMaterias(0);
  }
}

/* Styles go here */
select {
  margin: 1em;
}

Html Basico,Html Avanzado,CSS,JavaScript,AJAX,JSON

PHP Security,Logical Secutiy,Master in Security

Entre lineas I,Entre lineas II,Colores I,CSS Avanzado