发表新帖
发表新帖

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

后端 未结
关注
4 1720
南旧
南旧 2020-12-30 01:06

Is it possible to do this with Mustache.js? 

var data = {\"val\":\"3\"},
    template = \'
提交评论
  •  加载中...
  • 陌清茗
    2020-12-30 01:36

    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 →

    0 讨论(0)
  • 小鲜肉
    2020-12-30 01:41

    I little bit late, I know, just for future reference:

    <script>

var templates = {
    'dropbox': '{{#options}}{{>option}}{{/options}}',
    'option': '<option value="{{value}}"{{#selected}} selected="selected"{{/selected}}>{{text}}</option>'
};

var data = {
    'options': [
        { 'value': '1', 'text': 'One' },
        { 'value': '2', 'text': 'Two', 'selected': true },
        { 'value': '3', 'text': 'Three' }
    ]
};

$('#number').append(Mustache.render(templates.dropbox, data, templates));

</script>

<select id='number' name='number'>
    <option value="0">Choose a number</option>
</select>
    0 讨论(0)
  • 北恋
    2020-12-30 01:44

    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.

    0 讨论(0)
    •  看不清?
    提交回复
    热议问题