So I was doing a school project and I came across a pretty strange error in jQuery.
I basically repeated the same programming step and from the third time the code does not work.
I tried to identify what was returned on the console and I got this strange code.
I can not explain it right, maybe seeing a demo gets better.
The left select enables the right one, and so on. However, select Front does not enable Chapter and neither Chapter enables TypeEx.
Demo
The errors are basically of inattention.
Some problems in the code:
You have added # to the id in Chapter and TypeEx. At the time of calling the object, it obviously would not locate.
You tried to find $ ('# typeEx') with lowercase t, which also will not work.
The object you see in return, when executing a jQuery select for Chapter and TypeEx indicates that it was not found, only.
Normalize as below and everything will work fine.
<select id='Capítulo' size='3' disabled>
<option>Capitulo 1</option>
<option>Capitulo 2</option>
<option>Capitulo 3</option>
</select>
<select id='TipoEx' size='3' disabled>
<option>Revisando</option>
<option>Propostos</option>
<option>Complementares</option>
</select>
$('#Capítulo').click(function() {
capitulo = $(this).find(':selected').text();
$('#navigation a.capitulo').text(capitulo);
if (capitulo != '') {
$('#navigation a:eq(3)').addClass('active');
$('#TipoEx').prop('disabled', false);
}
});
$('#TipoEx').click(function() {
tipoEx = $(this).find(':selected').text();
$('#navigation a.tipoEx').text(tipoEx);
if (capitulo != '') {
$('#Exercícios').show();
}
});
});