jQuery:填充下拉列表的最佳做法？

Question

我看到的所有时间的例子似乎都不是最理想的,因为它涉及连接字符串,这似乎不是jQuery.它通常看起来像这样:

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

有没有更好的办法？

Answer 1

Andreas Grech非常接近......实际上this(请注意this循环中的项目而不是项目的引用):

var $dropdown = $("#dropdown");
$.each(result, function() {
    $dropdown.append($("<option />").val(this.ImageFolderID).text(this.Name));
});

Answer 2

$.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列表中(假设options是下拉元素的ID).

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

Answer 3

当然 - 制作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 ...具有足够数量的选项.你最终会为此付费,特别是在旧浏览器上.

注:正如法官指出,这也就土崩瓦解了,如果ImageFolderID和Name不正确编码 ...

Answer 4

或者可能:

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

Answer 5

最快的方法是:

 $.getJSON("/Admin/GetFolderList/", function(result) {
        var optionsValues = '<select>';
        $.each(result, function(item) {
            optionsValues += '<option value="' + item.ImageFolderID + '">' + item.Name + '</option>';
        });
        optionsValues += '</select>';
        var options = $('#options');
        options.replaceWith(optionsValues);
    });

根据此链接是最快的方式,因为在进行任何类型的DOM插入时,您将所有内容都包装在单个元素中.

Answer 6

我发现这是从jquery网站工作

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

Answer 7

我读过使用文档片段是高效的，因为它避免了每次插入 DOM 元素时的页面重排，所有浏览器（甚至 IE 6）也很好地支持它。

var fragment = document.createDocumentFragment();

$.each(result, function() {
  fragment.appendChild($("<option />").val(this.ImageFolderID).text(this.Name)[0]);
});

$("#options").append(fragment);

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

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

Answer 8

ES6的其他方法

fetch('https://restcountries.eu/rest/v1/all')
  .then((response) => {
    return response.json()
  })
  .then((countries) => {
    var options = document.getElementById('someSelect');
    countries.forEach((country) => {
      options.appendChild(new Option(country.name, country.name));
    });
  })