Bootstrap 预输入名称值对问题答案

【问题标题】：Bootstrap typeahead name value pair issueBootstrap 预输入名称值对问题
【发布时间】：2015-07-31 07:53:17
【问题描述】：

我有如下 JSON 数据：

[ { “身份证”：1 “名字”：“名字” }, { “身份证”：2 “名称”：“第二名称” } ]

现在，我正在使用 Bootstrap Typeahead。我想在 typeahead 下拉列表中向用户显示“名称”，但我需要用户选择的“名称”的相应“id”，就像我们在选择框中所做的那样。我的要求是这样的

<select>
   <option value="1">First Name</option>
   <option value="2">Second Name</option>
</select>

【问题讨论】：

标签： twitter-bootstrap bootstrap-typeahead basicnamevaluepair

【解决方案1】：

我不习惯 Bootstrap 预输入，但是当我经过一番搜索后看到它的示例时，它们并没有将数据显示为选择菜单。他们将数据显示为 div 标签。所以我认为这不是你需要的。

所以我将分享这个 jquery 解决方案，从您提供的数据数组中创建您需要的内容。

但首先，你的数据数组是一个对象数组，所以在对象元素和另一个元素之间，应该有一个逗号“，”，除了最后一个元素之外都是如此。

所以你的数组应该是这样的：

[ { "id": 1, "name": "firstName" }, { "id": 2, "name": "secondName" } ]

从该数组中写入您想要的选择标记的 jquery 解决方案是这样的：

var data=[ { "id": 1, "name": "firstName" }, { "id": 2, "name": "secondName" } ];
var el= document.createElement("select");
for (var i=0 ; i<data.length; i++){
    var child = "<option value='"+data[i].id+"'>"+data[i].name+"</option>";
    $(el).append(child);
}
document.body.appendChild(el);

这是一个fiddle。

【讨论】：