jQuery：最佳实践来填充下拉？
我看到所有的时间贴出来的例子看起来不是最理想的，因为它涉及连接string，这似乎不是jQuery。 它通常是这样的：
$.getJSON("/Admin/GetFolderList/", function(result) { for (var i = 0; i < result.length; i++) { options += '<option value="' + result[i].ImageFolderID + '">' + result[i].Name + '</option>'; } }); 有没有更好的办法？
安德烈亚斯·格雷奇（Andreas Grech）非常接近…实际上是this （请注意引用this而不是循环中的项目）：
var options = $("#options"); $.each(result, function() { options.append($("<option />").val(this.ImageFolderID).text(this.Name)); });
$.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)); }); });
我在上面做的是创build一个新的<option>元素，并将其添加到options列表（假设options是一个下拉元素的ID。
PS我的JavaScript有点生疏，所以语法可能不完美
当然 – 使options成为一个string数组，每次在循环中使用.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('')); });
是。 我还在使用string。 信不信由你，这是build立一个DOM片段的最快方法……现在，如果你只有几个选项，那么这并不重要 – 使用Dreas的技术来展示你是否喜欢这个风格。 但请记住，您调用浏览器的内部HTMLparsing器i*2次，而不仅仅是一次，并且每次通过循环修改DOM …具有足够数量的选项。 你最终会付钱，特别是在旧版浏览器上。
注：正如指出，如果ImageFolderID和Name 编码不正确 ，这将崩溃…
或者可能：
var options = $("#options"); $.each(data, function() { options.append(new Option(this.text, this.value)); });
最快的方法是这样的：
$.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); });
根据这个链接是最快的方式，因为在做任何types的DOM插入时，你把所有东西都包装在一个单独的元素中。
我发现这是从jQuery网站工作
$.getJSON( "/Admin/GetFolderList/", function( data ) { var options = $("#dropdownID"); $.each( data, function(key, val) { options.append(new Option(key, val)); }); });
$.get(str, function(data){ var sary=data.split('|'); document.getElementById("select1").options.length = 0; document.getElementById("select1").options[0] = new Option('Select a State'); for(i=0;i<sary.length-1;i++){ document.getElementById("select1").options[i+1] = new Option(sary[i]); document.getElementById("select1").options[i+1].value = sary[i]; } });
其他方法与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)); }); })
我使用selectboxes jquery插件。 它把你的例子变成：
$('#idofselect').ajaxAddOption('/Admin/GetFolderList/', {}, false);
我读过使用文档片段是高性能的，因为它避免了每次插入DOM元素时的页面重排，所有浏览器（甚至IE 6）也都支持。
var fragment = document.createDocumentFragment(); $.each(result, function() { fragment.appendChild($("<option />").val(this.ImageFolderID).text(this.Name)[0]); }); $("#options").append(fragment);
我希望它有帮助。 我通常使用function，而不是每次写所有的代码。
$("#action_selector").change(function () { ajaxObj = $.ajax({ url: 'YourURL', type: 'POST', // You can use GET data: 'parameter1=value1', dataType: "json", context: this, success: function (data) { json: data }, error: function (request) { $(".return-json").html("Some error!"); } }); json_obj = $.parseJSON(ajaxObj.responseText); var options = $("#selector"); options.empty(); options.append(new Option("-- Select --", 0)); $.each(ajx_obj, function () { options.append(new Option(this.text, this.value)); }); }); });
我一直在使用jQuery并调用一个函数来填充下拉菜单。
function loadDropDowns(name,value) { var ddl = "#Categories"; $(ddl).append('<option value="' + value + '">' + name + "</option>'"); }
function LoadCategories() { var data = []; var url = '@Url.Action("GetCategories", "InternalTables")'; $.getJSON(url, null, function (data) { data = $.map(data, function (item, a) { return "<option value=" + item.Value + ">" + item.Description + "</option>"; }); $("#ddlCategory").html('<option value="0">Select</option>'); $("#ddlCategory").append(data.join("")); }); }
function generateYears() { $.ajax({ type: "GET", url: "getYears.do", data: "", dataType: "json", contentType: "application/json", success: function(msg) { populateYearsToSelectBox(msg); } }); } function populateYearsToSelectBox(msg) { var options = $("#selectYear"); $.each(msg.dataCollecton, function(val, text) { options.append( $('<option></option>').val(text).html(text) ); }); }
