在表单中显示所选用户 ID 的名字答案

【问题标题】：show the Firstname of the picked UserID in form在表单中显示所选用户 ID 的名字
【发布时间】：2021-08-23 08:14:33
【问题描述】：

我有在用户中选择用户 ID 的表单。

<select>
    <option value="">Tabs User</option>
      <option value="ID3357">ID3357</option>
            <option value="ID2695">ID2695</option>
            <option value="ID1072">ID1072</option>
            <option value="ID1306">ID1306</option>
            <option value="ID2702">ID2702</option>

用户的名字： ID2695 雅各布 ID1072 萌 ID1306 萨拉 ID2702 山姆

当最终用户在表单中选择 ID 时，如何在表单下方显示 ID 的名字。

【问题讨论】：

Jacob 在您的代码中的什么位置？您真的对所有值/ID 进行硬编码吗？

标签： javascript html forms loops

【解决方案1】：

这段代码可能会有所帮助，

<!DOCTYPE html>
<html>
<body>
    <h1 id="name"></h1>
    <select onchange="getUser(this.value)">
        <option disabled selected value>-</option>
        <option value="ID3357">ID3357</option>
        <option value="ID2695">ID2695</option>
        <option value="ID1072">ID1072</option>
        <option value="ID1306">ID1306</option>
        <option value="ID2702">ID2702</option> 
    </select>
    <script type="text/javascript">
        var users = [
            { id: "ID2695", firstName: "Jacob" },
            { id: "ID1072", firstName: "Moe" },
            { id: "ID1306", firstName: "Sara" },
            { id: "ID2702", firstName: "Sam" },
            { id: "ID3357", firstName: "Someone" }
        ];
        function getUser(uid) {
            var [{ firstName }] = users.filter(({id}) => id === uid);
            document.getElementById("name").textContent = firstName;
        }
    </script>
</body>
</html>

说明：用户被硬编码到 js 中作为对象，id 和用户名。一旦有人从下拉列表中选择一个值，js 从下拉输入中获取值并过滤数组 + 从对象的返回数组中选择firstName。然后将其显示到 h1 中。就这么简单。

【讨论】：

Greeeeaat，感激不尽