javascript - 如何使用 Mustache.js 在下拉列表中设置选定的值？

Question

可以用 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');

Answer 1

val属性不起作用，因为 <select>从 <option> 获取其值具有 selected 的属性。我不太熟悉 Mustache，但这应该可以工作:

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

我认为您使用的模板不是惯用的 Mustache - 它的粒度太粗；你实际上并没有模板化任何东西。像这样的东西可能更像 mustache :

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 →