使用JQuery / Json填充选择列表的最佳方法是什么？

目前我们的开发团队使用这种模式，但我不禁想知道是否有更快或更高效的方法来完成相同的任务。

HTML

   ${name}  

这是Javascript：

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

Answer 1

这是我写的一个函数。 我不确定它是否比jQuery模板更快。 它一次创建和附加一个Option元素，这可能比模板慢 。 我怀疑模板构建了整个HTML字符串，然后一次性创建DOM元素。 这可能会更快。 我想这个function可以调整来做同样的事情 。 我使用过模板，我发现这个函数更容易用于填充Select列表这样简单的东西，它很适合我的utility.js文件。

更新：我更新了我的函数以首先构建HTML，并仅调用append（）一次。 它实际上运行得更快。 感谢您发布此问题，能够优化自己的代码是件好事。

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

function代码

 // 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 += '' + this[textKey] + ''; }); } else { // array of strings $.each(values, function () { var value = this.toString(); html += '' + value + ''; }); } 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; }