2

Resumen

Necesito que por medio de un Select el usuario pueda tener la posibilidad de escribir su tipo de organización si es que no esta entre los datos del Select ya registrados por una DB.

Codigo HTML

                <select class="formulario__input" id="interes" name="interes" required>
                    <option>Seleccione...</option>
                    <?php 
                   $query ="SELECT DISTINCT interes_Datos FROM datosform";

                   $result_Usuario = mysqli_query($conexion,$query);
                   while($row = mysqli_fetch_array($result_Usuario)){?>
                   
                       <option><?php echo utf8_encode($row['interes_Datos']);?></option>

                   <?php } ?>
                       <option>
                        <!--Aqui necesito poner un option llamado "otro" para el usuario-->
                       </option>
                </select>

Si alguien sabe como puedo implementarlo etaria eternamente agradecido <3 quedo atento ...

1
  • Respuesta corta: No es posible. Sugerencia: Crea un campo que estará oculto por CSS y se muestre cuando se seleccione la opción "Otro".
    – Triby
    el 28 feb. 2022 a las 15:23

2 respuestas 2

3

Bueno los atributos de la etiqueta select option no permiten hacer eso directamente, pero podrías hacerlo con javascript de forma dinamica algo como esto:

let otherText = document.querySelector("#other-text");
let select = document.querySelector("select");

select.addEventListener("change", () => {
  if(select.value == "Otro..."){
    otherText.style.zIndex = 0 + "";
  }else{
    otherText.style.zIndex = -1 + "";
  }
});
input{
        position: absolute;
        width: 100px;
        left: 8px;
        height: 15px;
        z-index: -1;
        border-right-color: transparent;
}
select{
        width: 130px;
        height: 21px;
        z-index: 0;
}
<select>
        <option>1</option>
        <option>2</option>
        <option>Otro... </option>
</select>
<input type="text" placeholder="Otro..." id="other-text">

Cuando seleccionas la última opción el input text se coloca por encima del select y cuando seleccionas otra opción se coloca por debajo

1
  • Gracias ! es lo que necesitaba
    – user269871
    el 28 feb. 2022 a las 19:05
1

Se hace por medio de un control input asociado a un datalist, de esta manera en vez de ser una lista cerrada te permite escribir valores que no se encuentran en esta, a manera de lista predictiva o de sugerencias.

<input class="formulario__input" id="interes" name="interes" required list="interes_list">
<datalist id="interes_list"                        
                    <?php 
                   $query ="SELECT DISTINCT interes_Datos FROM datosform";

                   $result_Usuario = mysqli_query($conexion,$query);
                   while($row = mysqli_fetch_array($result_Usuario)){?>
                   
                       <option><?php echo utf8_encode($row['interes_Datos']);?></option>

                   <?php } ?>                           
    </datalist>
</select>
4
  • No hay posibilidad de mostrar un imput dentro del select ? he visto formularios que lo implementan asi
    – user269871
    el 28 feb. 2022 a las 15:49
  • Hay una solución con jquery en stackoverflow.com/questions/35810045/put-input-inside-select
    – Pepe N O
    el 28 feb. 2022 a las 15:55
  • Es muy buena opción usar datalist, el funcionamiento es muy similar al select, aunque con unas pequeñas diferencias: no aparece el caracter para indicar que puedes seleccionar y la lista se abre hasta que comienzas a escribir o si el campo está vacío y haces doble clic.
    – Triby
    el 28 feb. 2022 a las 16:01
  • @Kevins Tal vez te refieras a Select2? select2.org/tagging el 28 feb. 2022 a las 16:06

Tu Respuesta

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