Javascript 如何使用小胡子模板向下拉列表添加选项?

Javascript 如何使用小胡子模板向下拉列表添加选项?,javascript,jquery,templates,mustache,Javascript,Jquery,Templates,Mustache,这是我的javascript对象,我想在下拉列表中添加选项?我想在每个选项中属性名作为值,属性值作为文本 { "": "", "CSharp40": "C# 4.0", ".NET": ".NET", "JQuery": "JQuery", "Javascript": "Javascript" } 输出如下所示 <select id="courses"> <option value=""></option> <option value

这是我的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>

C#4.0
.NET
JQuery
Javascript

你能告诉我怎么写这个小胡子模板吗?提前感谢

理想情况下,您的对象将是一组对象:

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); 
});
var obj=[{val:,title::},{val:“CSharp40”,title:“C#4.0”},{val:“.NET”,title:“.NET”},{val:“JQuery”,title:“JQuery”},{val:“Javascript”,title:“Javascript”};
//打开选择
var输出=“”;
//添加每个值
$.each(对象,函数(){
output+=Mustache.render('{title}}',this);
});
//关闭选择
输出+='';
//输出
$(函数(){//已准备好文档
$('body').html(输出);
});

同意,因为您的数据是一个列表,所以它应该在一个数组中。但是我建议您使用这个小胡子技术,而不是手动迭代数组。测试

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);
var课程=[
{val:,标题:},
{val:“CSharp40”,标题:“C#4.0”},
{val:“.NET”,标题:“.NET”},
{val:“JQuery”,标题:“JQuery”},
{val:“Javascript”,标题:“Javascript”}
];
var template=“{{{#list}}{{{title}}{{/list}}”;
//因为Mustach不喜欢对象的匿名数组
var rendered_template=Mustache.to_html(模板,{“list”:courses});
$(“#列表容器”).html(呈现的#模板);

我可以用JavaScript实现我不知道什么是胡子???