jQuery: Best Practice zum Auffüllen Drop-Down?

Question

Das Beispiel, das ich sehe die ganze Zeit geschrieben scheint wie es ist suboptimal, weil es Verketten von Strings enthält, die so nicht jQuery scheint. Es sieht normalerweise so aus:

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

Gibt es einen besseren Weg?

Answer 1

Andreas Grech war ziemlich nah ... es ist eigentlich this (beachten Sie den Hinweis auf this statt das Element in der Schleife):

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

Was ich oben tun, ist ein neues <option> Element zu schaffen und es in die options Liste hinzugefügt (options Annahme, daß die ID eines Drop-down-Element.

PS Mein Javascript ein wenig eingerostet ist so kann die Syntax nicht perfekt sein

Answer 3

ich das selectboxes jQuery-Plugin verwenden, indem es Ihr Beispiel in:.

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

Answer 4

Sicher - machen options ein Array von Zeichenfolgen und verwenden Sie .join('') statt += jedes Mal durch die Schleife. Geringfügige Leistungseinbußen beim Umgang mit einer großen Anzahl von Optionen ...

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

Ja. Ich arbeite immer noch mit Streichern. Ob Sie es glauben oder nicht, das ist der schnellste Weg, ein DOM-Fragment zu erstellen ... Wenn Sie jetzt nur ein paar Optionen haben, ist es nicht wirklich wichtig - verwenden Sie die Technik Dreas demonstrates, wenn Sie den Stil mögen. Aber bedenken Sie, Sie rufen den internen HTML-Parser des Browsers i*2 mal auf, anstatt nur einmal, und ändern das DOM jedes Mal durch die Schleife ... mit einer ausreichenden Anzahl von Optionen. Am Ende zahlen Sie dafür, besonders in älteren Browsern.

Hinweis: Wie Richter darauf hinweist, wird diese auseinander fallen, wenn ImageFolderID und Name sind nicht encoded properly ...

Answer 5

der schnellste Weg ist dies:

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

Nach this link ist der schnellste Weg, weil Sie alles in einem einzigen Element bei jeder Art von DOM-Einfügung wickeln.

Answer 6

$.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 7

Oder vielleicht:

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

Answer 8

Ich hoffe, es hilft. Ich benutze normalerweise Funktionen, schreibe stattdessen den gesamten Code.

$("#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 9

ich gelesen habe, dass document fragments mit performant ist, weil es Seite Reflow bei jedem Einfügen von DOM-Elemente vermeidet, ist es auch gut von allen Browsern (auch IE 6) unterstützt.

var fragment = document.createDocumentFragment(); 
 

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

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

Ich las zuerst über diese in CodeSchool's JavaScript Best Practices course.

Hier ist ein comparison of different approaches, danke an den Autor.

Answer 10

fand ich diesen von jquery Website mit 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 11

Anderen Ansatz zu arbeiten.

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

Answer 12

Ich habe mit jQuery und dem Aufruf eine Funktion zum Auffüllen Dropdown-Menüs

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

Answer 13

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 14

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 15

hier ist ein Beispiel i auf Änderung habe ich Kinder des ersten bekommen zweiten

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

} wählen in Auswahl); enter code here