包含对象的JavaScript下拉列表

我想用JavaScript创建一个下拉列表，其中包含实际对象，而不仅仅是一个值

例如，我有一个具有两个成员的对象，

ID

和

Name

。在下拉列表中，我希望显示每个对象的名称。但是，如果有人选择了一个名字，我希望能够轻松地获得相关的ID

---

如果没有两个单独的容器（一个用于DDL中的内容，另一个用于ID的相应索引），我不确定如何执行此操作。

如果我理解正确，请选择已支持此操作。选项文本和选项值是两个独立的东西

<select>
  <option value="1">Volvo</option>
  <option value="2">Saab</option>
  <option value="3">Opel</option>
  <option value="4">Audi</option>
</select>

沃尔沃汽车
萨博
欧宝
奥迪

检查这把小提琴

当您获得所选选项的值时，您可以获得存储的id，并通过该值访问实际对象（id可以在数组中索引，…）

html

<select id="selector"></select>

---

请看下面的小提琴：

有几种方法可以做到这一点，但这是我目前最喜欢的：

JavaScript

var数据=[{
id:1，
姓名：“富”
}, {
id:2，
名称：“酒吧”
}, {
id:3，
名称：“Baz”
}];
var select=document.createElement（'select'）；
select.innerHTML=data.map（函数（v）{
返回“”+v.name+“”；
}).加入（“”）；

---

然后，您可以将

选择

附加到身体中的某个位置，并添加所有选项。

将

值

属性用于您的ID

var ddl_items = [{ ID: 1, Text: "One" }, { ID: 2, Text: "Two" }];

for (var i = 0; i < ddl_items.length; i++ ) {
$("#ddl").append("<option value='" + ddl_items[i].ID + "'>" + ddl_items[i].Text + "</option>");

varddl_items=[{ID:1，Text:“一”}，{ID:2，Text:“两”}]；
对于（变量i=0；i

}

---

小提琴：

谢谢！我不知道这已经内置了。有很多类似的答案都是正确的，但我会为你的答案打分。

var data = [{
    id : 1,
    name : 'Foo'
}, {
    id : 2,
    name : 'Bar'
}, {
    id : 3,
    name : 'Baz'
}];

var select = document.createElement('select');
select.innerHTML = data.map(function(v){
    return '<option value="' + v.id + '">' + v.name + '</option>';
}).join('');

var ddl_items = [{ ID: 1, Text: "One" }, { ID: 2, Text: "Two" }];

for (var i = 0; i < ddl_items.length; i++ ) {
$("#ddl").append("<option value='" + ddl_items[i].ID + "'>" + ddl_items[i].Text + "</option>");

<select id="ddl">
</select>