如何使用 Mustache 模板向下拉列表添加选项？答案

【问题标题】：How to add options to dropdown using Mustache template?如何使用 Mustache 模板向下拉列表添加选项？
【发布时间】：2012-02-18 19:45:24
【问题描述】：

这是我的 javascript 对象，我想在下拉列表中添加选项？我希望属性名称作为值和属性值作为每个选项中的文本？

{ "": "", "CSharp40": "C# 4.0", ".NET": ".NET", "JQuery": "JQuery", "Javascript": "Javascript" }

输出如下所示

<select id="courses"> 
    <option value=""></option>
    <option value="CSharp40">C# 4.0</option>
    <option value=".NET">.NET</option>
    <option value="JQuery">JQuery</option>
    <option value="Javascript">Javascript</option>
</select>

你能告诉我如何为此编写 Mustache 模板吗？提前致谢

【问题讨论】：

我可以在 JavaScript 中做到我不知道什么是小胡子？？？

标签： javascript jquery templates mustache

【解决方案1】：

同意，由于您的数据是一个列表，它应该在一个数组中。但我建议您使用这种 Mustache-ier 技术，而不是手动迭代您的数组。经过测试。

var courses = [
    {val: "", title:""},
    {val: "CSharp40", title: "C# 4.0"},
    {val: ".NET", title: ".NET"},
    {val: "JQuery", title: "JQuery"},
    {val: "Javascript", title: "Javascript"}
];

var template = "<select id='courses'>{{#list}}<option value='{{val}}'>{{title}}</option>{{/list}}</select>";

// because Mustache doesn't like anonymous arrays of objects
var rendered_template = Mustache.to_html(template, {"list":courses} );

$('#list-container').html(rendered_template);

【讨论】：

【解决方案2】：

理想情况下，您的对象应该是一个对象数组：

var obj = [{val:"",title:""},{val:"CSharp40",title: "C# 4.0"},{val: ".NET",title: ".NET"},{val: "JQuery",title: "JQuery"},{val: "Javascript",title: "Javascript"}];

//open select
var output = '<select id="courses">';
//add each value
$.each(obj,function(){
    output += Mustache.render('<option value="{{val}}">{{title}}</option>', this);
});
//close select
output += '</select>';

//output
$(function(){ //on document ready
    $('body').html(output); 
});

【讨论】：