html select dropdownlist如何同时显示name和id

Question

我一直在寻找同类问题，但没有找到，我想要实现的是，我想在选项上同时显示“nama”和“id”，所以当单击下拉列表时应显示“wick dhdfyj97” ' 和 'abraham 15hndfj'，这可能吗（在 JavaScript 中）？现在我已经成功地只显示“nama”。这就是我的 json 的样子：[{"nama ": "wick","id": "dhdfyj97",},{"nama ": "abraham","id": "15hndfj",}]这是代码： .then(res =>{     res.json().then(num => {    for (var o = 0; o < num.length; o++) {    var i = document.getElementById("Select");    var d = document.createElement("option");    d.text = num[o].nama;        i.add(d);}    }  )   })

Answer 1

我们可以使用字符串文字添加两者。

 .then(res =>{ 

    res.json().then(num => {

       for (var o = 0; o < num.length; o++) {

            var i = document.getElementById("Select");

            var d = document.createElement("option");

            d.text = `${num[o].nama} ${num[o].id}`;

           i.add(d);

       }

    }

   )

 })

我还建议仅查询 html 标签一次并重复使用它，还直接使用 for of 循环迭代响应：

const i = document.getElementById("Select");

for (const item of num) {        

    const d = document.createElement("option");

    d.text = `${item.nama} ${item.id}`;

    i.add(d);

}

Answer 2

创建一个 Option 标签并将其textContent分配给item.namaand的串联item.id并将其附加到标签中Select，您还会看到删除该标签中的空格"nama "，所以它应该是相反的，否则它将在标签"nama"中显示未定义option

let Array = [

    { "nama": "wick", id: "dhdfyj97" },

    { "nama": "abraham", id: "15hndfj" },

  ];

  let Select = document.getElementById("Select");

  Array.map((item) => {

    var d = document.createElement("option");

    d.textContent = item.nama + " " + item.id;

    Select.appendChild(d);

  });

<select id="Select"> </select>

Answer 3

将 nama 和 id 连接在一起：

 .then(res =>{ 

    res.json().then(num => {

    

for (var o = 0; o < num.length; o++) {

    var i = document.getElementById("Select");

    var d = document.createElement("option");

    d.text = num[o].nama + ' ' + num[o].id;

    

    i.add(d);

}

    }

  )

   })