javascript - How to add options to dropdown using Mustache template? - Stack Overflow

admin管理员组

文章数量:1301537

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?

{ "": "", "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

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?

{ "": "", "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

• javascript
• jquery
• templates
• mustache

Share Improve this question Follow edited Jan 25, 2012 at 16:07 rodrigoap 7,4803838 silver badges4747 bronze badges asked Jan 25, 2012 at 16:04 user845392user845392 56322 gold badges88 silver badges1616 bronze badges 1

• i can do it in JavaScript i dont know what is mustache ??? – Marwan Commented Jan 25, 2012 at 16:10

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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

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); 
});

本文标签： javascriptHow to add options to dropdown using Mustache templateStack Overflow