Change display according to <select> option

Question

I am mounting a Selection Menu where the user selects a month, when the month is selected, a next selection menu is displayed to choose a day. What I need to do now is: when the user selects the day, a video is displayed. In this case, there is a preset video for each day.

The . js function I have is:

jQuery(document).ready(function($) {
    var arquivos = {
        Janeiro: ["./videos/1.mp4", "./videos/2.mp4", "./videos/3.mp4", "./videos/4.mp4"],
        Fevereiro: ["./videos/5.mp4", "./videos/6.mp4", "./videos/7.mp4", "./videos/8.mp4"],
    }

var dias = {
    Janeiro: ["Dia 6", "Dia 13", "Dia 20", "Dia 27"],
    Fevereiro: ["Dia 3", "Dia 10", "Dia 17", "Dia 24"],
}

$("#mes").change(function() {
    var selecionado = this.value;
    var html = arquivos[selecionado].reduce(function(str, arquivos){
        return str + '<option value="' + dias + '">' + dias + '</option>';
    }, '');
})
});

This is the video tag that each of the Dia menu should return:

<video class="borda-player" src="' + arquivos + '" width="56%" controls></video>

And finally, this is the basis in html:

<select name="dias" id="mes" class="selecao">
   <option value="Janeiro">Janeiro</option>
   <option value="Fevereiro">Fevereiro</option>
   <option value="Março">Março</option>
</select>
<select id="diaSelecionado" class="selecao"></select>

The end result should be like this:

Help me, please, help me!

Answer 1

Come on,

// Jquery básico
$( document ).ready(function(){
    // Mesmos dados anteriores, mas organizados de forma diferente
	var data = {
		'Janeiro' : [
						['Dia 6','./videos/1.mp4'],
						['Dia 13','./videos/2.mp4'],
						['Dia 20','./videos/3.mp4'],
						['Dia 27','./videos/4.mp4']
					],
		'Fevereiro' : [
						['Dia 3','./videos/5.mp4'],
						['Dia 10','./videos/6.mp4'],
						['Dia 17','./videos/7.mp4'],
						['Dia 24','./videos/8.mp4']
					]					
	}
	
// Mês selecionado
$("#mes").change(function() {
	// Captura o valor selecionado
	var selecionado = $("#mes option:selected").val();;
	
	// Restringe os valores para dias
	var days = data[selecionado];
	
	// Adiciona options a segundo select
	$.each(days,function(index, val){
		("#diaSelecionado").append($('<option>'),{
			text: val[0],
			value: val[1]
		})
	});
	
	// Quando o dia é selecionado
	$('#diaSelecionado").change(function() {
		// Modifica o src da tag video
		$('video').attr(
			'src': $("#diaSelecionado option:selected").val();
		);
		
		// Carrega o video
		$("video")[0].load();
	}
})	
})

I tried to leave the JS as organized as possible and being honest, I could not test the same so it is quite possible that there are errors, but it already serves to give a good base.

I recommend that you read a little more about the jQuery to carry out such a project. Any doubts we are there, I hope to have helped or at least given a light :D