Estou montando um Menu de seleção onde o usuário seleciona um mês, quando o mês é selecionado, é exibido um próximo menu de seleção para escolher um dia. O que preciso fazer agora é: quando o usuário selecionar o dia, é exibido um video. No caso, há um video predefinido para cada dia.
A função .js que tenho é:
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>';
}, '');
})
});
Esta é a tag do video que cada do menu Dia deve retornar:
<video class="borda-player" src="' + arquivos + '" width="56%" controls></video>
E por fim, esta é a base no 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>
O resultado final deveria ser assim:
Ajude-me, por gentileza!