Actualmente estoy trabajando en un algoritmo en el que las personas puedan seleccionar el equipo que creen que ganará en un torneo, en este caso, se ocultarán los equipos que el usuario no vaya seleccionando a medida que van avanzando las rondas, en este caso, el administrador da los 16 equipos iniciales ordenados en 8 encuentros. En la segunda ronda automáticamente deberían desaparecer de las opciones posibles en los 4 encuentros los equipos que el usuario no seleccionó, para eso pensé en agregar los equipos en variables y luego en un array, pero al parecer no funciona porque no me muestra los equipos que el usuario seleccionó.
Código JS
// MATCH 1
enfrentamiento1.forEach(function(equipo) {
var option = new Option(equipo, equipo);
document.getElementById("enfrentamiento1").appendChild(option);
});
// MATCH 2
enfrentamiento2.forEach(function(equipo) {
var option = new Option(equipo, equipo);
document.getElementById("enfrentamiento2").appendChild(option);
});
// MATCH 3
enfrentamiento3.forEach(function(equipo) {
var option = new Option(equipo, equipo);
document.getElementById("enfrentamiento3").appendChild(option);
});
// MATCH 4
enfrentamiento4.forEach(function(equipo) {
var option = new Option(equipo, equipo);
document.getElementById("enfrentamiento4").appendChild(option);
});
// MATCH 5
enfrentamiento5.forEach(function(equipo) {
var option = new Option(equipo, equipo);
document.getElementById("enfrentamiento5").appendChild(option);
});
// MATCH 6
enfrentamiento6.forEach(function(equipo) {
var option = new Option(equipo, equipo);
document.getElementById("enfrentamiento6").appendChild(option);
});
// MATCH 7
enfrentamiento7.forEach(function(equipo) {
var option = new Option(equipo, equipo);
document.getElementById("enfrentamiento7").appendChild(option);
});
// MATCH 8
enfrentamiento8.forEach(function(equipo) {
var option = new Option(equipo, equipo);
document.getElementById("enfrentamiento8").appendChild(option);
});
var enfrentamiento1 = ["Liverpool", "Leipzig"];
var enfrentamiento2 = ["Club Brugge", "Milan"];
var enfrentamiento3 = ["Eintracht", "Borussia Dortmund"];
var enfrentamiento4 = ["Inter", "PSG"];
var enfrentamiento5 = ["Real Madrid", "Manchester City"];
var enfrentamiento6 = ["Benfica", "Tottenham"];
var enfrentamiento7 = ["Napoli", "Chelsea"];
var enfrentamiento8 = ["Porto", "Bayern"];
//ROUND 2
var enfrentamiento1Seleccionado = document.getElementById("enfrentamiento1").value;
var enfrentamiento2Seleccionado = document.getElementById("enfrentamiento2").value;
var enfrentamiento3Seleccionado = document.getElementById("enfrentamiento3").value;
var enfrentamiento4Seleccionado = document.getElementById("enfrentamiento4").value;
var enfrentamiento5Seleccionado = document.getElementById("enfrentamiento5").value;
var enfrentamiento6Seleccionado = document.getElementById("enfrentamiento6").value;
var enfrentamiento7Seleccionado = document.getElementById("enfrentamiento7").value;
var enfrentamiento8Seleccionado = document.getElementById("enfrentamiento8").value;
var enfrentamientosRonda2 = [
[enfrentamiento1Seleccionado, enfrentamiento2Seleccionado],
[enfrentamiento3Seleccionado, enfrentamiento4Seleccionado],
[enfrentamiento5Seleccionado, enfrentamiento6Seleccionado],
[enfrentamiento7Seleccionado, enfrentamiento8Seleccionado]
];
for (var i = 0; i < enfrentamientosRonda2.length; i++) {
var select1 = document.getElementById("enfrentamiento9");
var equipo1 = enfrentamientosRonda2[i][0];
var equipo2 = enfrentamientosRonda2[i][1];
select1.options[select1.options.length] = new Option(equipo1, equipo2);
}
HTML
<form>
<h2>Round 1</h2>
<div>
<label for="enfrentamiento1">Match 1:</label>
<select id="enfrentamiento1">
<option value="">Select a team </option>
</select>
<div>
<label for="enfrentamiento2">Match 2:</label>
<select id="enfrentamiento2">
<option value="">Select a team </option>
</select>
<div>
<label for="enfrentamiento3">Match 3:</label>
<select id="enfrentamiento3">
<option value="">Select a team </option>
</select>
<div>
<label for="enfrentamiento4">Match 4:</label>
<select id="enfrentamiento4">
<option value="">Select a team </option>
</select>
<div>
<label for="enfrentamiento5">Match 5:</label>
<select id="enfrentamiento5">
<option value="">Select a team </option>
</select>
<div>
<label for="enfrentamiento6">Match 6:</label>
<select id="enfrentamiento6">
<option value="">Select a team </option>
</select>
<div>
<label for="enfrentamiento7">Match 7:</label>
<select id="enfrentamiento7">
<option value="">Select a team </option>
</select>
<div>
<label for="enfrentamiento8">Match 8:</label>
<select id="enfrentamiento8">
<option value="">Select a team </option>
</select>
<h2>Round 2</h2>
<div>
<label for="enfrentamiento9">Match 1:</label>
<select id="enfrentamiento9">
<option value="">Selecciona un equipo</option>
</select>
<label for="enfrentamiento10">Match 2:</label>
<select id="enfrentamiento10">
<option value="">Selecciona un equipo</option>
</select>
</div>
<div>
<label for="enfrentamiento11">Match 3:</label>
<select id="enfrentamiento11">
<option value="">Selecciona un equipo</option>
</select>
<label for="enfrentamiento12">Match 4:</label>
<select id="enfrentamiento12">
<option value="">Selecciona un equipo</option>
</select>
</div>
</form>