Is it possible to do this with Mustache.js?
var data = {val:3},
template = '<select>' +
'<option value=1>1</option>' +
'<option value=2>2</option>' +
'<option value=3>3</option>' +
'</select>';
var html = Mustache.to_html(template, data);
$(html).appendTo('body');
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');
