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

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

有没有更好的办法?


当前回答

$.getJSON("/Admin/GetFolderList/", function(result) {
    var options = $("#options");
    //don't forget error handling!
    $.each(result, function(item) {
        options.append($("<option />").val(item.ImageFolderID).text(item.Name));
    });
});

上面我所做的是创建一个新的<option>元素并将其添加到选项列表(假设options是下拉元素的ID)。

PS我的javascript有点生锈,所以语法可能不完美

其他回答

下面是填充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"));
     }
});

我一直在使用jQuery和调用一个函数来填充下拉列表。

function loadDropDowns(name,value)
{
   var ddl = "#Categories";
   $(ddl).append('<option value="' + value + '">' + name + "</option>'");
}

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

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

确定-使选项为字符串数组,并使用.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没有正确编码,这将会崩溃……

我使用jquery插件的选择框。它把你的例子变成:

$('#idofselect').ajaxAddOption('/Admin/GetFolderList/', {}, false);