Sou iniciante em trabalhar com JQuery, e estou com dificuldade em fazer um select
dinâmico funcionar.
Ao escolher no primeiro select
um valor o segundo select
deve exibir apenas os options
com class
terminados pelo valor selecionado no primeiro select
. O mesmo esquema funciona no terceiro select
em relação ao primeiro.
Eu utilizei um script funcional, porem adaptá-lo ele perdeu a funcionalidade, mas ele está escrito mais ou menos como precisaria.
<div class="form-group">
<label class="col-sm-3 control-label">Instituição</label>
<div class="col-sm-6">
<select name="instituicao_tur" required="required" class="form-control" id="instituicao_tur">
<option value="0">Selecione</option>
<option value="1"/>Instituição 1
<option value="2"/>Instituição 2
<option value="3"/>Instituição 3
</select>
</div>
</div>
$(document).ready(function() {
$('#instituicao_tur').change(function() {
if ($(this).val() == "0") {
$('.curso_zero').hide();
}
});
$('#instituicao_tur').change(function() {
if ($(this).val() == '1') {
$('.id_cur1').show();
}
});
$('#instituicao_tur').change(function() {
if ($(this).val() == '2') {
$('.id_cur2').show();
}
});
$('#instituicao_tur').change(function() {
if ($(this).val() == '3') {
$('.id_cur3').show();
}
});
});
});
jSFiddle com o código base.