我想在文本字段中列出名称，然后能够单击每个名称 [关闭]

Question

我正在尝试为 Firebase 上的项目创建管理站点。该网站的大多数页面都有一个大文本字段，应该包含所有当前可以修改的项目。

例如： 用户管理页面左侧的文本字段显示用户的所有信息，右侧是一个大文本字段，我希望能够将用户名加载到其中，然后能够选择一个并加载该用户的信息从 Firebase 用户数据库到左侧字段。然后我希望能够更改和保存这些值。

我目前的困境是我不明白如何实现右侧。我了解写入文本字段的基本过程，但是，我不知道如何使它们可选择。由于这在 Windows Windows 中很常见，我知道有办法做到这一点，但我不知道如何做。我对如何将名称分成单个对象也有些模糊。

我尝试创建的示例类似于 windows 卸载程序窗口[或此窗口在属性窗口中显示用户列表

https://i.stack.imgur.com/iGOjr.png

哪些命令可以帮助我实现我想要做的事情？

Answer 1

根据我对您的问题和您发布的图片的最佳理解，我创建了一个工作原型。这只是使用普通的 JavaScript、HTML 和 CSS。我确信它在实现上看起来会有些不同，但希望它足够接近，可以为您提供一个起点。

更新：

我根据 Sensoray 的评论更新了我的答案。

//create an object of users
let Users = [
  {
    "name": "? Fro Doe",
    "id": "user1",
    "snack": "Chips"
  },
  {
    "name": "? Mare Ree",
    "id": "user2",
    "snack": "Bananas"
  },
  {
    "name": "? Sam Wise",
    "id": "user3",
    "snack": "Candy"
  },
]

//identify our list element
let list = document.querySelector('#user-list');

//loop through users in out Users object and add them to the list
for (var i = 0; i < Users.length; i ++) {
  let newItem = document.createElement('option');
  newItem.innerHTML = Users[i].name;
  newItem.id = Users[i].id;
  if (i == 0) {
    newItem.className = "active";
  }
  list.appendChild(newItem);
}

list.size = Users.length;

updateResponse(list.firstChild);

//collect all the list items
let listItems = list.querySelectorAll('option');

//loop through the list itmes and add a click listener to each that toggles the 'active' state
for (var i = 0; i < listItems.length; i ++) {
  listItems[i].addEventListener('click', function(e) {
    if (!e.target.classList.contains('active')) {
      for (var i = 0; i < listItems.length; i ++) {
        listItems[i].classList.remove('active');
      }
      e.target.classList.add('active');
      
      updateResponse(e.target);
    }
  })
}

function updateResponse(element) {
  //collect the response element
  let response = document.querySelector('#response');
  
  //collect each input from the response element
  responseId = response.querySelector('.response-id');
  responseName = response.querySelector('.response-name');
  responseSnack = response.querySelector('.response-snack');
  
  //find the matching user in the users object and update the inputs to match
  for (var i = 0; i < Users.length; i ++) {
    if (Users[i].id == element.id) {
      responseId.value = Users[i].id;
      responseName.value = Users[i].name;
      responseSnack.value = Users[i].snack;
    }
  }
  
}

function updateUser() {
    //collect the response element
  let response = document.querySelector('#response');
  
  //collect each input from the response element
  responseId = response.querySelector('.response-id');
  responseName = response.querySelector('.response-name');
  responseSnack = response.querySelector('.response-snack');
  
  //update the js object values
  for (var i = 0; i < Users.length; i ++) {
    if (Users[i].id == responseId.value) {
      Users[i].name = responseName.value;
      Users[i].snack = responseSnack.value;
    }
  }
  
  //update the list
  //find current list item
  let curItem = list.querySelector('#'+responseId.value);
  //update the text on the item
  curItem.innerText = responseName.value;
  
  //keep the page from redirecting
  return false;
}

body {
  font-family: "Segoe UI Variable Text", system-ui, ui-rounded, sans-serif;
}

.parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

h1 {
  font-family: "Segoe UI Variable Display", system-ui, ui-rounded, sans-serif;
  font-weight: 500;
}

@media only screen and (max-width: 500px) {
  .parent {
    grid-template-columns: auto;
  }
}

select {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #ABABAB;
  border-radius: 8px;
  overflow: auto;
  width: 100%;
}
option {
  padding: 8px 4px;
}

form {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
}

<div class="parent">
  <div class="right">
    <h1>Users:</h1>
    <select name="user-list" size="3" id="user-list"></select>
  </div>
  <div class="left">
    <h1>User Info:</h1>
    <form id="response" onsubmit="return updateUser()">
      <label for="id">User ID:</label><input type="text" name="id" class="response-id" disabled></input>
      <label for="name">User Name:</label><input type="text" name="name" class="response-name"></input>
      <label for="snack">User's Favorite Snack:</label><input type="text" name="snack" class="response-snack"></input>
      <input type="submit" value="Save">
    </form>
  </div>
</div>