Alguien puede ayudarme. Quiero mostrar el cuadro de motivos si selecciono el estado de trabajo pendiente o incompleto.
DESPLEGABLE
<div class="form-group"> <label for="exampleFormControlSelect2">Job Status</label> <select type="text" id="job_status" name="job_status" onchange="myFunction()"> <option value=''></option> <option value="Doing">Doing</option> <option value="Pending">Pending</option> <option value="Incomplete">Incomplete</option> <option value="Completed">Completed</option> </select> </div>CASILLA DE MOTIVO QUE QUIERO QUE APAREZCA SI SELECCIONÉ PENDIENTE O INCOMPLETO
<div class="form-group row"> <label for="reason" class="col-sm-2 col-form-label">Reason</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputEmail3"> </div> </div>LA SECUENCIA DE COMANDOS
<script> function myFunction() { var x = document.getElementById("job_status").value; document.getElementById("demo").innerHTML = "You selected: " + x; } </script>GRACIAS A TODOS
Solo necesita cambiar el css de la entrada cada vez que seleccione esas opciones usando la condición simple if else.
function myFunction() { var x = document.getElementById("job_status").value; if(x == 'Pending' || x == 'Incomplete'){ document.getElementById("reason").style.display = 'block'; } else { document.getElementById("reason").style.display = 'none'; } } #reason { display:none; } <div class="form-group"> <label for="exampleFormControlSelect2">Job Status</label> <select type="text" id="job_status" name="job_status" onchange="myFunction()"> <option selected disabled>Select Status</option> <option value="Doing">Doing</option> <option value="Pending">Pending</option> <option value="Incomplete">Incomplete</option> <option value="Completed">Completed</option> </select> </div> <div id="reason" class="form-group row"> <label for="reason" class="col-sm-2 col-form-label">Reason</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputEmail3"> </div> </div>