Question

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

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

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

Answer 1

如果我理解正确，选择已支持此功能。选项文本和选项值是两个单独的东西

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

检查这个小提琴

https://jsfiddle.net/pg92tqka/

当你获得所选选项的值时，你可以得到存储的id，并通过这个值访问实际的对象（id可以是数组中的索引，......）

Answer 2

HTML

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

JS

var data = [
   { name :'david',  id:1 },
   { name :'daniel', id:2 }
]

data.forEach(function(item){
   var option = document.createElement('option');
   option.value = item.id;
   option.innerHTML = item.name;
   selector.appendChild(option)
})'

selector.onchange = function(){
   alert(this.value);
}

请参阅以下小提琴：https://jsfiddle.net/1jcrxoy9/

Answer 3

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

的JavaScript

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('');

然后，您可以将select附加在身体的某处，并附上所有选项。

Answer 4

使用value属性作为您的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>");

}

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

小提琴：https://jsfiddle.net/dap3x83v/

包含对象的JavaScript下拉列表

4 个答案:

的JavaScript