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>