1

Como hacer para que al seleccionar una opción del tag dataList, se capturare el evento y este llame a una función javaScript para que el mismo llene un campo automáticamente luego luego de seleccionarlo.

Este es mi codigo.

<form>

    <script type="text/javascript">
        // funcion que se ejecuta cada vez que se selecciona una opción

        function cambioOpciones()

        {

            document.getElementById('showId').value = document.getElementById('opciones').value;

        }
    </script>

    <datalist id='opciones' onchange='cambioOpciones();'>

        <option value=''>Selecciona una opción</option>

        <option value='1'>Opción 1</option>

        <option value='2'>Opción 2</option>

        <option value='3'>Opción 3</option>

    </datalist>

    <!-- input donde se mostrara el id de la opción -->

    <input type='text' id='showId' />

</form>

1 respuesta 1

0

Para usar el metodo onchange() debes escribir un tag input con su atributo list, indicándole el id del datalist, en ese mismo input debes escribir el método onchange(), para llamar a tu función.

Por otra parte, al parecer el tag select se adapta más a tu requerimiento, ya que en el datalist muestra y obtiene su value de option, en cambio el select muestra un título y obtiene el value del mismo.

Aquí dos ejemplos con ambos tags.

//Para el DataList
function cambioOpciones() {
  document.getElementById('showId').value = document.getElementById('valorOpciones').value;
}

//Para Select
function cambioOpcionesSelcet() {
  document.getElementById('showIdSelect').value = document.getElementById('opciones2').value;
}
<!DOCTYPE html>
<html>
<head>
  <script>
  //Aqui el script
  </script>
</head>
<body>

  <form>
    Datalist:
    <input list="opciones" id="valorOpciones" name="opciones" placeholder="Selecciona una opción" onchange="cambioOpciones()">
    <datalist id="opciones">
      <option value='Opción 1' </option>
      <option value='Opción 2' </option>
      <option value='Opción 3' </option>
    </datalist>
    <input type='text' id='showId' />
</form>
<br><hr>

<form>
  Datalist:
  <select id="opciones2" name="opciones2" onchange="cambioOpcionesSelcet()">
    <option value="">Selecciona una opción
    <option value="1">Opción 1
    <option value="2">Opción 2
    <option value="3">Opción 3
   </select>
   <input type='text' id='showIdSelect' />
</form>
</body>
</html>

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.