How to set a selected value in a dropdown list using Mustache.js?

The val attribute doesn't work, because a <select> takes its value from the <option>s which have the selected attribute. I'm not very familar with Mustache, but this should work:

// snip...        var html = Mustache.to_html(template, data);$(html)    .find('option[value=3]').attr('selected', true)    .end().appendTo('body');

I think that the template you're using is not idiomatic Mustache — it's too coarse grained; you're not actually templating anything. Something like this might be more Mustache-y:

var template = '<select>{{#options}}' +                   '<option value="{{val}}" {{#sel}}selected{{/sel}}>' +                        '{{txt}}' +                    '</option>' +                '{{/options}}</select>',    data = {options: [        {val: 1, txt: 'uno'},        {val: 2, txt: 'dos'},        {val: 3, txt: 'tres', sel: true}    ]};var html = Mustache.to_html(template, data);$(html).appendTo('body');

Demo →

if you do not want to modify the array or DOM tree afterwards you can use a function:

var selval=3; // select 3var template = '<select>{{#options}}' +                   '<option value="{{val}}" {{selected}}>{{txt}}</option>' +                '{{/options}}</select>';var data={    options: [        {val: 1, txt: 'one'},        {val: 2, txt: 'two'},        {val: 3, txt: 'three'}    ],    selected: function() {         if (this.val==selval) return "selected";         return "";    }};var html = Mustache.to_html(template, data);

I use this hack to keep it simple:

buildOptions = function(object) {    for (var i in object) {        object[i + '=' + object[i]] = true;    }    return object;}

In this way, you can transform this kind of data:

{    field1: 'abc',    field2: 'xyz' }

With this kind of Mustache Template:

<select name="field1">    <option {{#field1=abc}}selected{{/field1=abc}}>abc</option>    <option {{#field1=def}}selected{{/field1=def}}>def</option>    <option {{#field1=ghi}}selected{{/field1=ghi}}>ghi</option></select><select name="field2">    <option {{#field2=uvw}}selected{{/field2=uvw}}>uvw</option>    <option {{#field2=xyz}}selected{{/field2=xyz}}>xyz</option></select>

Like this:

html = Mustache.to_html(template, buildOptions(data));

Which still really easy to read! The only caveat is that you can't have a '.' in your values.