CODEWITHSUNDEEP
javascriptjqueryjquery-templates
Homer
Homer

Reputation: 7826

How do I render X <option>s in a <select>using jQuery.tmpl?

I'm inserting rows in a <table> that are bound to a JSON object. A cell in the table contains a <select> that needs to contain the number of objects, so 7 objects would produce 7 <option>s, 1-7.

Can this be done in the template definition?

Edit: I've added sample data and markup. From this data, I would want to add 3 <option>s (1-3) to the DisplayOrder <select> and have the appropriate <option> selected for each <select>.

Example: http://jsfiddle.net/4SxTS/

var data = [{
    "Id": 1,
    "DisplayOrder": 1,
    "LabelText": "Unit On-Line Status:"},
{
    "Id": 2,
    "DisplayOrder": 2,
    "LabelText": "AGC Pct:"},
{
    "Id": 3,
    "DisplayOrder": 3,
    "LabelText": "Main Steam Heat Rate
}];

<table border="1" cellpadding="0" cellspacing="0">
    <thead><tr><th>Display Order</th><th>Label Text</th></tr></thead>
    <tbody></tbody>
</table>

<script id="attributeTemplate" type="text/x-jquery-tmpl">
    <tr>
        <td><select name="DisplayOrder"></select></td>
        <td><input type="text" name="LabelText" value="${LabelText}" /></td>
    </tr>
</script>

Upvotes: 0

Views: 1159

Answers (2)

Andrew Whitaker
Andrew Whitaker

Reputation: 126072

I'm not sure exactly what you mean without some sample data and markup, but I think the main part of your question deals with looping through numbers and rendering an option tag for each number. You could do this by creating an array containing "N" elements and then using {{each}}, but I think that using a custom template tag works well here:

  1. Define a {{for}} tag that iterates through numbers 0 to n:

    $.extend(jQuery.tmpl.tag, {
    'for': {
        open: "for(var $i = 0; $i < $1; $i++) {",
        close: "}"
    }
});

  2. Use the new tag in a template:

    <script type="text/html" id="row-tmpl">
    {{each Rows}}
    <tr>
        <td>${Title}</td>
        <td>${Description}</td>
        <td>
            <select>
                {{for $data.TotalObjects}}
                <option>${$i}</option>
                {{/for}}
            </select>
        </td>
    </tr>
    {{/each}}
</script>

    Called with:

    var rows = {
    TotalObjects: 5,
    Rows: [{
        Title: 'Test Row',
        Description: 'Test Row Description'
    },
    {
        Title: 'Another Row',
        Description: 'Another Row Description'
    }]
};

Best demonstrated in a working example: http://jsfiddle.net/xgE3Y/

Your situation might be even simpler, but my answer should enable you to at least use a simple for loop in a template and act on each iteration's value.

Upvotes: 1

Ali Habibzadeh
Ali Habibzadeh

Reputation: 11568

Maybe something like this:

$(function () {

        var thisSelectObjects = 8;
        var thatSelectObjects = 2;


        $.fn.setOptions = function (options) {

            var settings = {
                'selectNum': 1
            };

            return this.each(function () {
                if (options) {
                    $.extend(settings, options);
                }
                for (i = 0; i < settings.selectNum; i++) {
                    $(this).append('<option>' + i + '<option/>');
                }
            });
        };



        $('#thisSelect').setOptions({ 'selectNum': thisSelectObjects });
        $('#thatSelect').setOptions({ 'selectNum': thatSelectObjects });

    });

Html:

    <body>
    <select id='thisSelect'></select>
    <select id='thatSelect'></select>
</body>

Upvotes: 0

Related Questions