使用选择显示带有纯 javascript 的多个列表之一答案

【问题标题】：Use a select to display one of several lists with pure javascript使用选择显示带有纯 javascript 的多个列表之一
【发布时间】：2020-12-05 13:32:32
【问题描述】：

我从三个数组生成了三个列表。我已经使用 makeUl 函数来做到这一点。现在我只想显示我在选择表单中选择的列表。我该怎么做？

HTML：

<body>

<div name="form" id="contList">
    <select name="sections" id="selectUser">
        <option>Juan</option>
        <option>Rosa</option>
        <option>Ana</option>
    </select>
</div>

JS：

let users = [
user1 = ["Nombre: Juan", "Primer apellido: Fernandez", "Segundo apellido: Mora", "Email:     jft85@gmail.com", "Edad: 35", "Ciudad: Valencia", "Artículos: 0"],
user2 = ["Nombre: Rosa", "Primer apellido: Moreno", "Segundo apellido: Lopez", "Email: rml89@gmail.com", "Edad: 31", "Ciudad: Oviedo", "Artículos: 0"],
user3 = ["Nombre: Ana", "Primer apellido: Utrera", "Segundo apellido: Fuentes", "Email: auf99@gmail.com", "Edad: 21", "Ciudad: Granada", "Artículos: 0"],
];

function makeUL(array) {

let list = document.createElement('ul');



for(let i = 0; i < array.length; i++) {
    
    let item = document.createElement('li');

    item.appendChild(document.createTextNode(array[i]));

    list.appendChild(item);
}

return list;
}

document.getElementById("contList").appendChild(makeUL(users[0]));
document.getElementById("contList").appendChild(makeUL(users[1]));
document.getElementById("contList").appendChild(makeUL(users[2]));

【问题讨论】：

标签： javascript select arraylist

【解决方案1】：

找到修改后的代码，

let users = [
  user1 = ["Nombre: Juan", "Primer apellido: Fernandez", "Segundo apellido: Mora", "Email:     jft85@gmail.com", "Edad: 35", "Ciudad: Valencia", "Artículos: 0"],
  user2 = ["Nombre: Rosa", "Primer apellido: Moreno", "Segundo apellido: Lopez", "Email: rml89@gmail.com", "Edad: 31", "Ciudad: Oviedo", "Artículos: 0"],
  user3 = ["Nombre: Ana", "Primer apellido: Utrera", "Segundo apellido: Fuentes", "Email: auf99@gmail.com", "Edad: 21", "Ciudad: Granada", "Artículos: 0"],
];

function makeUL(array) {

  let list = document.createElement('ul');
  for (let i = 0; i < array.length; i++) {
    let item = document.createElement('li');
    item.appendChild(document.createTextNode(array[i]));
    list.appendChild(item);
  }
  return list;
}

function userDetail(htmlObj) {
  let selectedUserHTML = document.getElementById("selectedUser");
  if (htmlObj.value === "empty") {
    selectedUserHTML.innerHTML = '';
    return;
  }
  selectedUserHTML.innerHTML = '';
  let selectedUser = 0;
  users.filter((user, idx) => {
    if (user.indexOf(`Nombre: ${htmlObj.value}`) === 0) {
      selectedUser = idx;
    }
  });
  selectedUserHTML.appendChild(makeUL(users[selectedUser]));
}

<div name="form" id="contList">
    <select name="sections" id="selectUser"  onChange="userDetail(this)">
    <option value="empty">Select</option>
        <option value="Juan">Juan</option>
        <option value="Rosa">Rosa</option>
        <option value="Ana">Ana</option>
    </select>
    <div id="selectedUser">
    </div>
</div>

【讨论】：