1

Os comento mi problema.

Estoy haciendo un ejemplo tonto con jsp y javascript comenzar a aprender, así que aviso que no soy ningún experto y es posible que este cometiendo errores de principiante.

Verán, en el jsp recibo un arraylist con objetos de tipo usuario. Con estos objetos hago un foreach para rellenar un datalist con los atributos de nombre de los objetos usuarios y otro datalist con el atributo apellido.

<form method="POST" action="" />

                <input type="text" id="iNombre" list="ListNombres" name="nombre" placeholder="Selecciona nombre usuario" style="padding:1em; border-radius: 0px;" onchange="seleccionaCampos()" autocomplete="off"/>
                <datalist id="ListNombres">

                <c:set var="contador" value="1"></c:set>

                <c:forEach items="${listaUsuarios}" var="usuario">

                    <option value="${usuario.nombre}" id="oName_${contador}"/>

                    <c:set var="contador" value="${contador+1}"></c:set>
                </c:forEach>

                </datalist>

                <input type="text" id="iApellido" list="ListApellido1" name="apellido" placeholder="Selecciona apellido usuario" style="padding:1em; border-radius: 0px;" autocomplete="off"/>
                <datalist id="ListApellido1">

                <c:set var="contador" value="1"></c:set>

                <c:forEach items="${listaUsuarios}" var="usuario">

                    <option value="${usuario.apellido1}" id="oApellido_${contador}"/>

                    <c:set var="contador" value="${contador+1}"></c:set>
                </c:forEach>

                </datalist>

            </form>

Lo que me gustaría hacer es que al seleccionar un valor en el campo nombre de la lista de nombres se seleccione automáticamente el campo que tendría el mismo indice, es decir, pertenecería al mismo objeto usuario en la lista de apellido. Pero no tengo claro si eso es posible o si tiene muchísima complicación, ya que mi nivel de js es prácticamente nulo. He estado dando palos de ciego en con la función que lo haría y leyendo, pero sigo sin ver la luz ni de refilón.

No se si al seleccionar un option se le coloca el atributo selected y en base a eso puedo recoger el valor que este en ese momento seleccionado. Y después recoger el option en el que coincida coincida el valor seleccionado anteriormente con el value establecido en el option y ya teniendo el elemento, en base al id, sacar el indice con un split. Y así poder seleccionar el value del datalist de apellidos con id=oApellido+contador y asignar ese valor al input de apellidos?? O si hay alguna manera más sencilla? o si lo que he dicho tiene sentido. Tampoco se si al seleccionar elementos por atributos te devuelve siempre un array. En fin... que cualquier indicativo es útil.

2
  • 1
    Imagino que lo que quieres es poder capturar el evento en el que se selecciona una opción de las de arriba y luego, según el valor seleccionado, marcar uno de las opciones de abajo ¿es así? el 11 jul. 2019 a las 10:59
  • 1
    Si, básicamente xD quiero seleccionar la propiedad que corresponda al mismo objeto, Si, por ejemplo, selecciono el segundo option del datalist de nombre se seleccione también el segundo del datalist de apellidos. el 11 jul. 2019 a las 15:34

1 respuesta 1

1

Hola creo que algo así es lo que necesitas.

<html>
  <head>
    <script src="https://code.jquery.com/jquery-2.1.0.js" integrity="sha256-D6d1KSapXjq2tfZ6Ie9AYozkRHyB3fT2ys9mO2+4Wvc=" crossorigin="anonymous"></script>

    <script type="text/javascript">
      $(document).on("change", "input", function() {
        var opcionesNombre = $("#nombre")[0].options;
        var opcionesAP = $("#ap")[0].options;

        //Obtenemos el id del nombre
        for (var i = 0; i < opcionesNombre.length; i++) {
          if (opcionesNombre[i].value == $(this).val()) {
            let nombreId = opcionesNombre[i].id;

            //Recoremos el otro list para buscar el id obtenido
            for (var i = 0; i < opcionesAP.length; i++) {
                 if (opcionesAP[i].id == nombreId) {
                    $("#lsAp").val(opcionesAP[i].value);
                 }
            }
            break;
          }
        }
      });
    </script>
  </head>
  <body>
    <input list="nombre" />
    <datalist id="nombre">
       <option id="1" value="Internet Explorer"/>
       <option id="2"  value="Firefox"/>
       <option id="3"  value="Chrome"/>
       <option id="4"  value="Safari"/>
    </datalist>

    <input id="lsAp" list="ap" />
    <datalist id="ap">
       <option id="1" value="Windows"/>
       <option id="2"  value="Linux"/>
       <option id="3"  value="Chrome OS"/>
       <option id="4"  value="MacOs"/>
    </datalist>
  </body>
</html>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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