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