mdb-problem - code helper

HTML

xxxxxxxxxx
 
<html>
​
    <head>
      <div id="contenedor" class="container" style="margin-top: 1%;height: auto; margin-bottom: 12%; overflow: overlay">
      <div class="col-md-10 mb-0 md-form" >
        <div class="subtitulo" style="text-align: left; padding-top: 3%">PRUEBA</div>
        <select class="mdb-select md-form" id="selectPrueba">
​
        </select>
        </div>
​
        <div class="col-md-10 mb-0 md-form" >
          <div class="subtitulo" style="text-align: left; padding-top: 3%">ITEM</div>
          <select class="mdb-select md-form" id="selectItem">
​
          </select>
        </div>
      </div>
  </head>
</html>

CSS

​

xxxxxxxxxx
 
$(document).ready(function () { 
  $('.mdb-select').materialSelect();
  cargarPruebas();
})
​
function cargarPruebas(){
  //PRUEBA
  $('#selectPrueba').materialSelect({ destroy: true });
  $("#selectPrueba").append('<option value="" disabled selected>Selecciona una prueba</option>');
  $("#selectPrueba").append('<option value="1" >prueba 1</option>');
  $("#selectPrueba").append('<option value="2" >prueba 2</option>');
  $("#selectPrueba").append('<option value="3" >prueba 3</option>');
  $('#selectPrueba').materialSelect();
}
​
$('#selectPrueba').on('change', function(e){
  //ITEM
  $('#selectItem').materialSelect({ destroy: true });
  $("#selectItem").append('<option value="" disabled selected>Selecciona un item</option>');
  $("#selectItem").append('<option value="1" >test 1</option>');
  $("#selectItem").append('<option value="2" >test 2</option>');
  $("#selectItem").append('<option value="3" >test 3</option>');
  $('#selectItem').materialSelect();
});

Console errors: 0