entonces quiero agregar alguna entrada basada en el valor de la opción del menú desplegable que se seleccionará. Por ejemplo, el menú desplegable se ve así:
<form action="#" method="post"> <select name="job" id="job" > <option value="">position</option> <option value="1">Teacher</option> <option value="2">Principal</option> <option value="3">Staff</option> </select> </form>y si el valor seleccionado es el número 1 o el maestro, se mostrará una nueva entrada como esta debajo:
<input type="number" name="student" id="student"> <input type="Text" name="class" id="class">si saben cómo hacerlo, tal vez puedan ayudarme con esto, ya sea usando php o js porque he estado atascado con este problema durante mucho tiempo.
antes de eso, configure el estilo de entrada como ocultar, luego puede intentar cambiar en seleccionar, que es obtener el valor de seleccionar. luego proceda a mostrar la entrada oculta.
const job = document.getElementById("job"); let add = document.getElementsByClassName("addEx"); job.addEventListener("change",function() { if (this.value == 1) { for (let i = 0; i < add.length; i++) { add[i].style.display = 'block'; } } else { for (let i = 0; i < add.length; i++) { add[i].style.display = 'none'; } } }); .addEx { display:none; } <form action="#" method="post"> <select name="job" id="job" > <option value="">position</option> <option value="1">Teacher</option> <option value="2">Principal</option> <option value="3">Staff</option> </select> <input type="number" name="student" id="student" class="addEx"> <input type="Text" name="class" id="class" class="addEx"> </form>Puedes usar así:
jQuery(document).ready(function() { $('#job').change(function() { let job = $('#job').val(); if (job == '1') { $('#sampleBox').show(); } else { $('#sampleBox').hide(); } }); }); #sampleBox { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select name="job" id="job"> <option selected hidden disabled>Position</option> <option value="1">Teacher</option> <option value="2">Principal</option> <option value="3">Staff</option> </select> <div id="sampleBox"> <input type="number" name="student" id="student"> <input type="Text" name="class" id="class"> </div>