Here is my javascript object and i want to add options to dropdown? I want property name goes as value and property value go as text in each option?
这是我的javascript对象,我想添加选项来下拉?我想让属性名变成值属性值变成文本?
{ "": "", "CSharp40": "C# 4.0", ".NET": ".NET", "JQuery": "JQuery", "Javascript": "Javascript" }
The output would be like below
输出如下所示
<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>
can you tell me how to write Mustache template for this? Thanks in advance
你能告诉我怎么写胡子模板吗?谢谢提前
2 个解决方案
#1
6
Agreed that since your data is a list, it should be in an array. But instead of manually iterating over your array, I'd propose that you use this Mustache-ier technique. Tested.
同意由于您的数据是一个列表,所以它应该在一个数组中。但是,我建议您使用这种mustachier技术,而不是手工遍历数组。测试。
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
3
Ideally, your object would be an array of objects:
理想情况下,对象将是一个对象数组:
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);
});
#1
6
Agreed that since your data is a list, it should be in an array. But instead of manually iterating over your array, I'd propose that you use this Mustache-ier technique. Tested.
同意由于您的数据是一个列表,所以它应该在一个数组中。但是,我建议您使用这种mustachier技术,而不是手工遍历数组。测试。
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
3
Ideally, your object would be an array of objects:
理想情况下,对象将是一个对象数组:
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);
});