How to open 4 sequential Selects, the last 2 not related to items?

Question

EDITED

I have 4 selects I called Level:

Level 1 opens Level 2 as each item is selected.

Each Level 1 item opens a specific select (works and uses Jquery)

What I need:

When selecting any item in Level 2, Open the single select Level 3.

And when selecting any item of Level 3, Open select Level 4

Obs: There is no link between items, only open level 3 and 4

And how to hide levels 2, 3 and 4? Show only when the previous one is selected. (for example: Qdo the user enters for the first time only shows Level 1 > selects > shows Level 2 > selects > shows Level 3 > selects > shows Level 4)

I appreciate the alerts and I’m sorry.

$(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>

Answer 1

Problem.

The initial step towards understanding the problem was better the endentation. There was an attempt to nest unrelated structures and this made it difficult to read the code. Solved this problem I was able to understand what the problem was about.

The author of the question would like to link the content of a series of <selects>, four in total, where the content of a <select> depended on the previous.

What I did?

I have only progressed existing thinking by maintaining a unitary and constant increment to <option value>. I made the event change propagate to the next one so when it changed one the subsequent ones would have their contents accommodated.

$(function(){

    $('.hidden').hide();

    $('select[name=nivel1]').change(function(){

    	var id = $('select[name=nivel1]').val();
        $('select[name=nivel2],select[name=nivel3],select[name=nivel4] ').prop("disabled", id === 0 );

        $('select[name=nivel2]').empty();
        $('select[name=nivel3]').empty();
        $('select[name=nivel4]').empty();

        $('select[name=nivel2]').html($('div.nivel2-f' + id).html());
        $('select[name=nivel2]').change();    

    });
  
    $('select[name=nivel2]').change(function(){
        var id = $('select[name=nivel2]').val();
        $('select[name=nivel3]').empty();
        $('select[name=nivel4]').empty();
        $('select[name=nivel3]').html($('div.nivel3-f' + id).html());
        $('select[name=nivel3]').change();
    });

    $('select[name=nivel3]').change(function(){
        var id = $('select[name=nivel3]').val();
        $('select[name=nivel4]').empty();
        $('select[name=nivel4]').html($('div.nivel4-f' + id).html());
        $('select[name=nivel4]').change();
    });    
  
  
});

<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><br><br>
<select name='nivel2' disabled="true"></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><br><br>
<!-- até aqui esta OK = Nível 1 abre Nivel 2 -->

<!-- aqui começa Nível 3 e Nivel 4 (incompleto)-->
<select name='nivel3' disabled="disabled"></select>
<div class="hidden nivel3-f3">
	<option value='7'>Aa texto a</option>
	<option value='8'>Aa texto b</option>
</div>
<div class="hidden nivel3-f4">
	<option value='9'>Ab texto a</option>
	<option value='10'>Ab texto b</option>
</div>
<div class="hidden nivel3-f5">
	<option value='11'>Ba texto a</option>
	<option value='12'>Ba texto b</option>
</div>
<div class="hidden nivel3-f6">
	<option value='13'>Bb texto a</option>
	<option value='14'>Bb texto b</option>
</div><br><br>

<select name='nivel4' disabled="disabled"></select>
<div class="hidden nivel4-f7">
	<option value='11'>Aaa texto a</option>
	<option value='12'>Aaa texto b</option>
</div>
<div class="hidden nivel4-f8">
	<option value='13'>Aab texto a</option>
	<option value='14'>Aab texto b</option>
</div>
<div class="hidden nivel4-f9">
	<option value='11'>Aba texto a</option>
	<option value='12'>Aba texto b</option>
</div>
<div class="hidden nivel4-f10">
	<option value='13'>Abb texto a</option>
	<option value='14'>Abb texto b</option>
</div>
<div class="hidden nivel4-f11">
	<option value='11'>Baa texto a</option>
	<option value='12'>Baa texto b</option>
</div>
<div class="hidden nivel4-f12">
	<option value='13'>Bab texto a</option>
	<option value='14'>Bab texto b</option>
</div>
<div class="hidden nivel4-f13">
	<option value='11'>Aaa texto a</option>
	<option value='12'>Aaa texto b</option>
</div>
<div class="hidden nivel4-f14">
	<option value='13'>Bba texto a</option>
	<option value='14'>Bbb texto b</option>
</div><br><br>
<button type="submit">Gravar</button>
</form>