JSFiddle - React, Tailwind, and code Playground
HTML
<div id="page-wrap" data-role="page">
<div id="content" data-role="content">
<div id="configuracion">
<form id="form_configuracion" method="post" action="#">
<div id="equipo_local">
<div data-role="fieldcontain" class="entrenador">
<label for="entrenadorL">Entrenador</label>
<select id="entrenadorL" name="entrenadorL">
<option value="0">Ninguno</option>
<option value="772">Talant Dujshebaev</option>
</select>
</div>
<div data-role="fieldcontain" class="ayundante">
<label for="ayudanteL">Ayudante</label>
<select id="ayudanteL" name="ayudanteL">
<option value="0">Ninguno</option>
<option value="490">Ra�l Gonz�lez Guti�rrez</option>
</select>
</div>
<div data-role="fieldcontain" class="auxiliar">
<label for="auxiliarL">Auxiliar</label>
<select id="auxiliarL" name="auxiliarL">
<option value="0">Ninguno</option>
<option value="9253">Angel Luis Martin Ballesteros</option>
<option value="9259">Augusto Martinez S�nchez</option>
<option value="9257">Jose Luis P�rez Poblete</option>
<option value="898">Jose Maria Garcia Plaza</option>
<option value="5">Julio Lozano Castillo</option>
</select>
</div>
<div data-role="fieldcontain" class="delegado">
<label for="delegadoL">Delegado</label>
<select id="delegadoL" name="delegadoL">
<option...
JavaScript
$(document).ready(function () {
console.log('1 - working');
// Función que va añadiendo o quitando elementos al campo "Oficial responsable"
// del equipo local dependiendo de los campos anteriores.
$("#equipo_local select").change(function () {
console.log('2 - Working');
$("#oficialResponsableL").empty();
$("#oficialResponsableL").append("<option value=0>Ninguno</option>");
var valueEnt = $("#entrenadorL").val();
if (valueEnt !== '0') {
var strEnt = $("#entrenadorL option:selected").text();
$("#oficialResponsableL").append("<option value=\"" + valueEnt + "\">" + strEnt + "</option>");
}
var valueAyu = $("#ayudanteL").val();
if (valueAyu !== '0') {
var strAyu = $("#ayudanteL option:selected").text();
$("#oficialResponsableL").append("<option value=\"" + valueAyu + "\">" + strAyu + "</option>");
}
var valueAux = $("#auxiliarL").val();
if (valueAux !== '0') {
var strAux = $("#auxiliarL option:selected").text();
$("#oficialResponsableL").append("<option value=\"" + valueAux + "\">" + strAux + "</option>");
}
var valueDel = $("#delegadoL").val();
if (valueDel !== '0') {
var strDel = $("#delegadoL option:selected").text();
$("#oficialResponsableL").append("<option value=\"" + valueDel + "\">" + strDel + "</option>");
}
var valueMed = $("#medicoL").val();
if (valueMed !== '0') {
var strMed = $("#medicoL option:selected").text();
$("#oficialResponsableL").append("<option value=\"" + valueMed + "\">" + strMed + "</option>");
}
});
});