I’m trying to learn how to use the materialize framework (it’s for a uni assignment) I have added the framework to my project but it seems that the framework has somehow vanished the <select>
, why this is happening?
here is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Inscripción en línea</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script>
$(document).ready(function(){
$("#nivel").on("change", function(){
var nivel = $(this).val();
crearListaCarreras(nivel);
});
});
var oferta = {
'lic_e':['Administración y Dirección de Empresas', 'Derecho', 'Comunicación y Entornos Digitales', 'Ingeniería en Sistemas Computacionales', 'Psicología'],
'lic_m':['Administración', 'Derecho', 'Ingeniería Industrial', 'Informática'],
'mae_e':['Administración y Gestión de Instituciones Educativas', 'Derecho Fiscal', 'Derecho Privado', 'Redes y Telecomunicaciones', 'Impuestos'],
'doc_e':['Ciencias Administrativas', 'Derecho', 'Ingeniería en Tecnologías Emergentes', 'Educación']
};
function crearListaCarreras(nivel){
var carreras = $("#carrera").empty().append($("<option value=''>Seleccione una opción</option>"));
if(nivel !== ""){
var lista_carreras = [];
var costo = 0;
switch(nivel){
case 'lic_e': lista_carreras = oferta.lic_e; costo = 1500; break;
case 'lic_m': lista_carreras = oferta.lic_m; costo = 2500; break;
case 'mae_e': lista_carreras = oferta.mae_e; costo = 3000; break;
case 'doc_e': lista_carreras = oferta.doc_e; costo = 3500; break;
}
if(lista_carreras.length > 0){
$.each(lista_carreras, function(k,v){
carreras.append(
$("<option>").text(v)
)
});
$("#costo").val(costo);
}
}
}
</script>
</head>
<body>
<div class="container">
<img src="https://servicios.ver.ucc.mx/icecc/img/logo_ucc_transparente.png" style="background:#002449"/>
<h1>Inscripción en línea</h1>
<h3>Ingreso</h3>
Nivel<br>
<select id="nivel">
<option value="">Seleccione una opción</option>
<option value="lic_e">Licenciatura escolarizada</option>
<option value="lic_m">Licenciatura mixta</option>
<option value="mae_e">Maestría</option>
<option value="doc_e">Doctorado</option>
</select><br>
Carrera<br>
<select id="carrera">
<option value="">Seleccione una opción</option>
</select>
<h3>Datos personales</h3>
C.U.R.P<br />
<input type="text" /><br>
Nombre<br />
<input type="text" /><br>
Apellidos<br />
<input type="text" /><br>
E-mail<br />
<input type="text" /><br>
Celular<br />
<input type="text" /><br>
Teléfono<br />
<input type="text" /><br>
Escuela de procedencia<br />
<input type="text" />
<h3>Información de pago</h3>
Total a pagar<br />
<input type="text" id="costo" readonly/><br>
Método de pago<br />
<input type="checkbox" /> depósito referenciado<br>
<input type="checkbox" /> tarjeta de crédito o débito<br>
<input type="checkbox" /> en cajas de la UCC<br>
<input type="button" value="Enviar"/>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
I have tried to read the documentation but it has prove unhelpful.