1

Estoy inciándome en javascript para darle funcionales a mis hojas de html.

Estoy realizando un formulario en html a modo de práctica de preguntas y respuestas de tal manera que contenga respuestas del tipo "Si, No, Especificar" y que dependiendo de si elige la opcion Especificar, se muestre un textarea que por defecto está oculto.

Si el formulario consta de 1 o 2 preguntas, la función que realicé me sirve, pero si el formulario tiene 10, 20, 30 preguntas, la forma en que lo estoy haciendo ya no es eficiente.

Les dejo el ejercicio para que puedan entender lo que indico.

Como podría realizar una función para no tener que escribir una función por cada pregunta?

<!DOCTYPE html>
<html>

<body>
  <label>Pregunta1</br>
  <select onchange="f1(this)">
    <optgroup label="Elegir">
        <option value="No" selected>No</option>
        <option value="Si">Si</option>
        <option value="especificar" id="esp">Especificar</option>
    </optgroup>
  </select></br>
  <textarea id = "area1" style = "display: none;"></textarea>
  </br></br>
  <label>Pregunta1</br>
  <select onchange="f2(this)">
    <optgroup label="Elegir">
        <option value="No" selected>No</option>
        <option value="Si">Si</option>
        <option value="especificar" id="esp">Especificar</option>
    </optgroup>
  </select>
  <textarea id = "area2" style = "display: none;"></textarea>
  </br></br>

  <script>
    function f1 (self) {
      if (self.value == "especificar"){
        document.getElementById("area1").style.display = 'Block'
      }
      else {
        document.getElementById("area1").style.display = 'none'
      }
    }
    function f2 (self) {
      if (self.value == "especificar"){
        document.getElementById("area2").style.display = 'Block'
      }
      else {
        document.getElementById("area2").style.display = 'none'
      }
    }
  </script>

</body>

</html>

1

2 respuestas 2

0

Puedes hacer algo como esto:

$('.select').change(function(){

  var option = $(this).val();
  if(option == 'especificar'){
    $(this).next().css({'display':'block'});
  }
  else{
    $(this).next().css({'display':'none'});
  }
});
textarea {
  display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Pregunta 1</br>
  <div>
    <select id="pregunta-1" class="select">
      <optgroup label="Elegir">
          <option value="No" selected>No</option>
          <option value="Si">Si</option>
          <option value="especificar" id="esp">Especificar</option>
      </optgroup>
    </select>
    <textarea></textarea>
  </div>
  <label>Pregunta 2</br>
  <div>
    <select id="pregunta-2" class="select">
      <optgroup label="Elegir">
          <option value="No" selected>No</option>
          <option value="Si">Si</option>
          <option value="especificar" id="esp">Especificar</option>
      </optgroup>
    </select>
    <textarea></textarea>
</div>

3
  • Aunque la solución es correcta, el OP no está usando JQuery en su código ni ha especificado en las etiquetas de la pregunta que tenga pensado usarlo. Personalmente, adaptaría la solución a Javascript sin librerías. Es posible que no se pueda usar JQuery o bien por ser un ejercicio o bien porque donde quiera implementar su solución se prescinda de su uso.
    – phpMyGuel
    Commented el 21 may. 2020 a las 7:33
  • @phpMyGuel tienes toda la razón. No me he dado cuenta en ese asunto. sorry
    – cooper
    Commented el 21 may. 2020 a las 7:35
  • Muchas gracias, phpMyGuel auque no había especificado JQuery, me resultó muy útil para también echarle ganas a jquery. Está solucionado. Tanto lo indicado por @cooper como por Carmen me sirvieron de lujo.
    – allweb
    Commented el 21 may. 2020 a las 9:08
0

Un modo de hacerlo es proporcionando ids a los select y pasando este id como parámetro de la función, que va ser única para todos los selects. En el ejemplo este id coincide con el valor numérico del id del textarea.

En la función por defecto tenemos un display none que cambia a block si el valor seleccionado es "especificar".

function fcontrol(a) {
  let display = "none";
  if (document.getElementById(a).value == "especificar"){
    display = "block";
  }
  document.getElementById("area"+a).style.display = display;
}
<select onchange="fcontrol(1)" id="1">
    <optgroup label="Elegir">
        <option value="No" selected>No</option>
        <option value="Si">Si</option>
        <option value="especificar" id="esp">Especificar</option>
    </optgroup>
  </select></br>
  <textarea id = "area1" style = "display: none;"></textarea>
  </br></br>
    <select onchange="fcontrol(2)" id="2">
    <optgroup label="Elegir">
        <option value="No" selected>No</option>
        <option value="Si">Si</option>
        <option value="especificar" id="esp">Especificar</option>
    </optgroup>
  </select>
  <textarea id = "area2" style = "display: none;"></textarea>
  </br></br>

1
  • Carmen, muchas gracias por la ayuda, me sirvió mucho.
    – allweb
    Commented el 21 may. 2020 a las 9:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.