jQuery: Thực hành tốt nhất để thả xuống?

Ví dụ tôi thấy được đăng mọi lúc có vẻ như không tối ưu, bởi vì nó liên quan đến các chuỗi nối, có vẻ như không phải là jQuery. Nó thường trông như thế này:

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

Có cách nào tốt hơn?

Andreas Grech đã khá gần ... thực sự this(lưu ý tham chiếu đến thisthay vì mục trong vòng lặp):

var $dropdown = $("#dropdown");
$.each(result, function() {
    $dropdown.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));
    });
});

Những gì tôi đang làm ở trên là tạo một <option>phần tử mới và thêm nó vào optionsdanh sách (giả sử optionslà ID của phần tử thả xuống.

PS javascript của tôi hơi bị rỉ sét nên cú pháp có thể không hoàn hảo

Chắc chắn - tạo optionsmột chuỗi các chuỗi và sử dụng .join('')thay vì +=mỗi lần qua vòng lặp. Cú va chạm hiệu năng nhẹ khi xử lý số lượng lớn các tùy chọn ...

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(''));
});

Đúng. Tôi vẫn đang làm việc với các chuỗi toàn bộ thời gian. Dù bạn có tin hay không, đó là cách nhanh nhất để xây dựng một đoạn DOM ... Bây giờ, nếu bạn chỉ có một vài lựa chọn, điều đó sẽ không thực sự quan trọng - hãy sử dụng kỹ thuật mà Dreas thể hiện nếu bạn thích phong cách này. Nhưng hãy lưu ý, bạn đang gọi i*2thời gian của trình phân tích cú pháp HTML bên trong của trình duyệt , thay vì chỉ một lần và sửa đổi DOM mỗi lần qua vòng lặp ... với đủ số lượng tùy chọn. cuối cùng bạn sẽ trả tiền cho nó, đặc biệt là trên các trình duyệt cũ hơn.

Lưu ý: Như Công lý chỉ ra, điều này sẽ sụp đổ nếu ImageFolderIDvà Namekhông được mã hóa đúng cách ...

Hoặc có thể:

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

Cách nhanh nhất là đây:

 $.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);
    });

Theo liên kết này là cách nhanh nhất vì bạn bọc mọi thứ trong một yếu tố duy nhất khi thực hiện bất kỳ loại chèn DOM nào.

Tôi thấy điều này được làm việc từ trang web jquery

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

Tôi đã đọc rằng việc sử dụng các đoạn tài liệu là hiệu quả vì nó tránh được phản xạ trang sau mỗi lần chèn phần tử DOM, nó cũng được hỗ trợ tốt bởi tất cả các trình duyệt (ngay cả IE 6).

var fragment = document.createDocumentFragment();

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

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

Lần đầu tiên tôi đọc về điều này trong khóa học Thực hành tốt nhất về JavaScript của CodeSchool .

Đây là một so sánh các phương pháp khác nhau , cảm ơn đến tác giả.

Cách tiếp cận khác vớ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));
    });
  })

Tôi sử dụng plugin jquery selectboxes . Nó biến ví dụ của bạn thành:

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

$.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];
            }
            });

Tôi hy vọng nó sẽ giúp. Tôi thường sử dụng các chức năng thay vì viết tất cả các mã mọi lúc.

    $("#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));
        });
    });
});

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)
    );
});
}

đây là một ví dụ tôi đã làm về sự thay đổi tôi nhận được con của lựa chọn đầu tiên trong lựa chọn thứ hai

jQuery(document).ready(function($) {
$('.your_select').change(function() {
    $.ajaxSetup({
        headers:{'X-CSRF-TOKEN': $("meta[name='csrf-token']").attr('content')}
    });

    $.ajax({
        type:'POST',
        url: 'Link',
        data:{
          'id': $(this).val()
        },
        success:function(r){
          $.each(r, function(res) {
                console.log(r[res].Nom);
                 $('.select_to_populate').append($("<option />").val(r[res].id).text(r[res].Nom));
            });
        },error:function(r) {
          alert('Error');
        }
    });
});

});enter code here

Tôi đã và đang sử dụng jQuery và gọi một hàm để điền vào phần thả xuống.

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(""));
    });
}

Dưới đây là cách Jquery để điền vào danh sách thả xuống có id là "FolderListDropDown"

$.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"));
     }
});