2

Si el select-option tiene valor "Negro" ocultar el input (que tiene name="color").

HTML:

<form method="POST">

     <select name="opcion">
        <option>Negro</option>
        <option>Color</option>
     </select>

     <input name="color" type="text"></input>

<button type="submit">Guardar</button>
</form>

Javascript:

<script>
    var opcion = document.getElementsByName("opcion");
    var color = document.getElementsByName("color");

    valor = opcion[0].innerHTML;
    if (valor == "Negro"){
        color[0].style.visibility = "hidden";
    }
</script>

1 respuesta 1

1

Para este caso te haré los siguientes comentarios:

  • Lo ideal sería que manejes la obtención del texto elegido del option por medio del evento change ya que si tienes N elementos entonces se haría tedioso estar indicando el índice del valor deseado
  • En lugar de tratar de recuperar para ocultar un input por su name el cual puede ser un atributo presente con el mismo valor en N inputs y que de nuevo tendrías que mostrar el índice del elemento a modificar mejor asignale un id lo cual lo hace un elemento único
  • Por otro lado para ocultar el elemento te puedes auxiliar de display y de los valores none y de inline; donde el primero sería para que no se muestre y el segundo es para mostrarlo

Propuesta

    <form method="POST">
    
         <select id="opciones" name="opcion">
            <option>---</option>
            <option>Negro</option>
            <option>Color</option>
         </select>
    
         <input id="color" name="color" type="text"></input>
    
    <button type="submit">Guardar</button>
    </form>
    
    <script>
      let opciones  = document.getElementById("opciones")
      let cajaTexto = document.getElementById("color")
      
      opciones.addEventListener("change", () => {
        let eleccion = opciones.options[opciones.selectedIndex].text
        
        if(eleccion === "Negro") {
          cajaTexto.style.display = "none"
        } else {
          cajaTexto.style.display = "inline"
        }
      })
    </script>

Usamos inline para que la caja de texto siga apareciendo en línea con el botón de guardar, es decir en el mismo renglón.

Sería mejor ocupar display en lugar de visibility por que el primero remueve el elemento del flujo del DOM y haría que el botón se mueva a lado del SELECT mientras que el visibility si lo quita de la vista del usuario pero hace que su espacio ocupado se respete y al no existir re acomodos se ve raro que quede el select + un espacio en blanco + botón de guardar

Lecturas recomendadas

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.