我经常看到的示例似乎不是最优的,因为它涉及到连接字符串,这似乎不是jQuery。它通常是这样的:

$.getJSON("/Admin/GetFolderList/", function(result) {
    for (var i = 0; i < result.length; i++) {
        options += '<option value="' + result[i].ImageFolderID + '">' + result[i].Name + '</option>';
    }
});

有没有更好的办法?


当前回答

我发现这是从jquery网站工作

$.getJSON( "/Admin/GetFolderList/", function( data ) {
  var options = $("#dropdownID");
  $.each( data, function(key, val) {
    options.append(new Option(key, val));
  });
});

其他回答

您可以从SQL端创建选项(联合) 并返回为字符串,并将该字符串附加到下拉列表 您可以在代码中删除循环。 即,如果你使用任何后端,如SQL server 您可以使用coalesce创建options标签 即你将得到一个包含整个选项的字符串

然后您可以从后端返回整个字符串,并将其附加到您的下拉列表中

或者:

var options = $("#options");
$.each(data, function() {
    options.append(new Option(this.text, this.value));
});

下面是填充id为“FolderListDropDown”的下拉列表的Jquery方法。

$.getJSON("/Admin/GetFolderList/", function(result) {
    for (var i = 0; i < result.length; i++) {
        var elem = $("<option></option>");
        elem.attr("value", result[i].ImageFolderID);
        elem.text(result[i].Name);
        elem.appendTo($("select#FolderListDropDown"));
     }
});

确定-使选项为字符串数组,并使用.join(")而不是+=每次通过循环。在处理大量选项时,性能会有轻微的提升……

var options = [];
$.getJSON("/Admin/GetFolderList/", function(result) {
    for (var i = 0; i < result.length; i++) {
        options.push('<option value="',
          result[i].ImageFolderID, '">',
          result[i].Name, '</option>');
    }
    $("#theSelect").html(options.join(''));
});

是的。我一直都在用绳子。信不信由你,这是构建DOM片段的最快方法……现在,如果你只有几个选择,那也没关系——如果你喜欢这种风格,可以使用Dreas演示的技巧。但是请记住,您要调用浏览器的内部HTML解析器i*2次,而不是只调用一次,并且每次都要通过循环修改DOM……有足够多的选择。您最终将为此付出代价,尤其是在旧的浏览器上。

注意:正如Justice指出的,如果ImageFolderID和Name没有正确编码,这将会崩溃……

我读过使用文档片段是高性能的,因为它避免了每次插入DOM元素时页面回流,它也被所有浏览器(甚至ie6)很好地支持。

var fragment = document.createDocumentFragment(); 美元。Each (result, function() { 片段。列表末尾($(“<选项/ >”).val (this.ImageFolderID)。text (this.Name) [0]); }); $(" #选项”).append(片段);

我第一次读到这个是在CodeSchool的JavaScript最佳实践课程中。

这里是不同方法的比较,感谢作者。