Best way to populate select list with JQuery / Json?

Question

Currently our dev team uses this pattern, but I can't help but wonder if there is a faster or more html-efficient way of accomplishing the same task.

HTML

<select id="myList" style="width: 400px;">
</select>
<script id="myListTemplate" type="text/x-jQuery-tmpl">
        <option value="${idField}">${name}</option>
</script>

And this is the Javascript:

function bindList(url) {
    callAjax(url, null, false, function (json) {
        $('#myList').children().remove();
        $('#myListTemplate').tmpl(json.d).appendTo('#myList');
    });
}

Ornithischian

jQuery templates are pretty fast, especially if you are updating the markup asynchronously. As long as you are only making 1 append call and not 1 for every option value, you're fine. – Volauvent

What performance numbers are we talking here? How many options are being added? – Consubstantiation

The lists aren't huge, maybe 20-60 options. Of the 2, I guess I'm more concerned about the code volume then the raw computational speed. – Ornithischian

If you want to check out a jQuery plugin that does this and has some additional features, check out appelsiini.net/projects/chained – Chartreuse

Answer 1

This is a function I wrote to do just that. I'm not sure if it's faster than jQuery Templates. It creates and appends the Option elements one at a time, which may be slower than Templates. I suspect that Templates builds the whole HTML string, and then creates the DOM elements all in one shot. That may be a faster. I suppose this function could be adjusted to do the same thing. I've worked with Templates, and I do find that this function is easier to consume for something a simple as populating a Select list, and it fits nicely into my utility.js file.

Update: I updated my function to build the HTML first, and call append() only once. It actually runs much faster now. Thanks for posting this question, it's nice to be able to optimize one's own code.

Consuming the function

 // you can easily pass in response.d from an AJAX call if it's JSON formatted
 var users = [ {id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}, {id: 3, name: 'Cindy'} ]
 setSelectOptions($('#selectList'), users, 'id', 'name');

The function code

// Fill a select list with options using an array of values as the data source
// @param {String, Object} selectElement Reference to the select list to be modified, either the selector string, or the jQuery object itself
// @param {Object} values An array of option values to use to fill the select list. May be an array of strings, or an array of hashes (associative arrays).
// @param {String} [valueKey] If values is an array of hashes, this is the hashkey to the value parameter for the option element
// @param {String} [textKey] If values is an array of hashes, this is the hashkey to the text parameter for the option element
// @param {String} [defaultValue] The default value to select in the select list
// @remark This function will remove any existing items in the select list
// @remark If the values attribute is an array, then the options will use the array values for both the text and value.
// @return {Boolean} false
function setSelectOptions(selectElement, values, valueKey, textKey, defaultValue) {

    if (typeof (selectElement) == "string") {
        selectElement = $(selectElement);
    }

    selectElement.empty();

    if (typeof (values) == 'object') {

        if (values.length) {

            var type = typeof (values[0]);
            var html = "";

            if (type == 'object') {
                // values is array of hashes
                var optionElement = null;

                $.each(values, function () {
                    html += '<option value="' + this[valueKey] + '">' + this[textKey] + '</option>';                    
                });

            } else {
                // array of strings
                $.each(values, function () {
                    var value = this.toString();
                    html += '<option value="' + value + '">' + value + '</option>';                    
                });
            }

            selectElement.append(html);
        }

        // select the defaultValue is one was passed in
        if (typeof defaultValue != 'undefined') {
            selectElement.children('option[value="' + defaultValue + '"]').attr('selected', 'selected');
        }

    }

    return false;

}

Allred