مسج:أفضل الممارسات لملء القائمة المنسدلة؟

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

وأندرياس غريش كان قريبا جدا ... انها فعلا 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 هو معرف المنسدلة العنصر.

PS بلدي جافا سكريبت قليلا صدئ ذلك بناء الجملة قد لا يكون مثاليا

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...الآن، إذا كان لديك خيارات قليلة فقط، فلن يكون الأمر مهمًا حقًا - استخدم هذه التقنية يوضح دريس إذا كنت تحب الاسلوب.لكن ضع في اعتبارك أنك تستدعي محلل 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

ولقد وجدت أن يكون هذا العمل من موقع مسج

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

Answer 7

ولقد قرأت أن استخدام وperformant لللأنه يتجنب الصفحة إنحسر على كل الإدراج من عنصر DOM، كما انها تدعم بشكل جيد من قبل جميع المتصفحات (حتى IE 6).

var fragment = document.createDocumentFragment();

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

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

وأنا لأول مرة قرأت عن هذا في CodeSchool جافا سكريبت أفضل الممارسات بالطبع .

وفيما يلي مقارنة من المناهج المختلفة و الشكر موصول للمؤلف .

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

Answer 9

وأنا استخدم selectboxes مسج المساعد. وتبين المثال الخاص بك إلى:

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

Answer 10

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

Answer 11

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

Answer 12

وآمل أن يساعد. وعادة ما تستخدم وظائف بدلا إرسال جميع في كل التعليمات البرمجية.

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

Answer 13

ولقد تم استخدام مسج واستدعاء دالة لتجميع القوائم المنسدلة.

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

Answer 14

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

Answer 15

وهنا مثال فعلت بشأن تغير أحصل على الأطفال من أول اختيار في الثانية حدد

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