0

Como hacer para que solo me aparezca el usuario seleccionado? Que al seleccionar otro usuario el anterior desaparezca y solo salga el seleccionado.

Codigo Javascript

var ajax = new XMLHttpRequest();
ajax.open("GET", "https://jsonplaceholder.typicode.com/users", true);
ajax.onreadystatechange = cargarUsuarios;
ajax.send(null);

function cargarUsuarios() {
    if (ajax.readyState == 4) {
        var datos = ajax.response;
        var users = JSON.parse(datos);

        var select = document.getElementById("select");
        var infoUser = document.getElementById("infoUser");
        var div = document.getElementsByTagName("div")[0];

        users.forEach(e => {

            var options = `<option value="${e.id}"> ${e.name} </option>`;
            select.insertAdjacentHTML("beforeend", options);

            select.addEventListener('change', function () {
                var selectedOption = this.options[select.selectedIndex];

                if (selectedOption.value == e.id) {

                    var lista = `<li>Username: ${e.username} <hr> Calle: ${e.address.street} <hr> Movil: ${e.phone} <hr> Compañia: ${e.company.name}</li><hr>`;
                    infoUser.insertAdjacentHTML('beforeend', lista)

                    div.style.display = "block";

                }

            });

        });   
    }
}

Codigo HTML:

<form action="#" name="form">
    <select name="nombres" id="select">
        <option>Selecciona un usuario</option>
    </select>
</form>
<div>
   <ul id="infoUser">

   </ul>
</div>
1
  • 1
    puedes usar jquery $("#infoUser").empty();lo que hace es eliminar todos los li a.. de tu UL....esto lo haces antes de crearlo..!! Commented el 8 mar. 2019 a las 17:51

2 respuestas 2

0

Agrega esta línea de código después de tu if para que elimine todos los hijos de tu elemento ul.

 while (infoUser.firstChild) {
      infoUser.removeChild(infoUser.firstChild);
    }
1
  • He probado el codigo que has puesto. Pero se borran todos los LI. Puede que me haya explicado mal. Quiero que solo se muestre la informacion del usuario seleccionado. Gracias por responder Commented el 10 mar. 2019 a las 10:24
0

He solucionado el problema cambiando infoUser.insertAdjacentHTML('beforeend', lista) por infoUser.innerHTML = lista;

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.