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"中显示未定义optionlet Array = [&nbsp; &nbsp; { "nama": "wick", id: "dhdfyj97" },&nbsp; &nbsp; { "nama": "abraham", id: "15hndfj" },&nbsp; ];&nbsp; let Select = document.getElementById("Select");&nbsp; Array.map((item) => {&nbsp; &nbsp; var d = document.createElement("option");&nbsp; &nbsp; d.textContent = item.nama + " " + item.id;&nbsp; &nbsp; Select.appendChild(d);&nbsp; });<select id="Select"> </select>

Answer 3

将 nama 和 id 连接在一起：&nbsp;.then(res =>{&nbsp;&nbsp; &nbsp; res.json().then(num => {&nbsp; &nbsp;&nbsp;for (var o = 0; o < num.length; o++) {&nbsp; &nbsp; var i = document.getElementById("Select");&nbsp; &nbsp; var d = document.createElement("option");&nbsp; &nbsp; d.text = num[o].nama + ' ' + num[o].id;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; i.add(d);}&nbsp; &nbsp; }&nbsp; )&nbsp; &nbsp;})