EDITADO
Tenho 4 selects que chamei de Nível:
O Nível 1 abre o Nível 2 conforme cada item é selecionado.
Cada item do Nível 1 abre um select específico (funciona e usa Jquery)
O que preciso:
Qdo selecionar qualquer item do Nível 2, Abra o único select Nível 3.
E qdo selecionar qualquer item do Nível 3, Abra o select Nível 4
obs: Não há relação entre ítens, apenas abrir o nível 3 e 4
E como esconder os níveis 2, 3 e 4? Mostrar só qdo o anterior for selecionado. (por exemplo: Qdo o usuario entra pela 1ª vez só mostra o Nível 1 > seleciona > mostra Nível 2 > seleciona > mostra Nível 3 > seleciona > mostra Nível 4)
Agradeço os alertas e me desculpem.
$(function(){
$('.hidden').hide();
//Roda OK = nível 1 abre nível 2
$('select[name=nivel1]').change(function(){
var id = $('select[name=nivel1]').val();
$('select[name=nivel2]').empty();
$('select[name=nivel2]').html($('div.nivel2-f' + id).html());
});
//tentei este. Não faz nada - Como fazer??
$('select[name=nivel2]').change(function(){
var id = $('select[name=nivel2]').val();
$('select[name=nivel3]').empty();
$('select[name=nivel3]').html($('div.nivel3-f' + id).html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select name='nivel1' required>
<option value='0'>Selecionar Nivel 1</option>
<option value='1'>texto A</option>
<option value='2'>texto B</option>
</select>
<select name='nivel2'></select>
<div class="hidden nivel2-f1">
<option value='3'>A texto a</option>
<option value='4'>A texto b</option>
</div>
<div class="hidden nivel2-f2">
<option value='5'>B texto a</option>
<option value='6'>B texto b</option>
</div>
<!-- até aqui esta OK = Nível 1 abre Nivel 2 -->
<!-- aqui começa Nível 3 e Nivel 4 (incompleto)-->
<select name='nivel3'></select>
<div class="hidden nivel3-f3">
<option value='7'>AAA</option>
<option value='8'>BBB</option>
</div>
<select name='nivel4'></select>
<div class="hidden nivel4-f4">
<option value='9'>DDD</option>
<option value='10'>EEE</option>
</div>
<button type="submit">Gravar</button>
</form>
div
dentro dosoptions
, deve sempre ser umselect
, osoptions
e fechar o select, igual ao que fez no "nivel1" – Ricardo Pontual 18/09 às 2:29