jQuery Best practice to populate drop down

Question

The example I see posted all of the time seems like it s suboptimal  because it involves concatenating strings  which seems so not jQuery  It usually looks like this     getJSON   Admin GetFolderList    function result        for  var i   0  i  lt  result length  i              options      lt option value      result i  ImageFolderID      gt     result i  Name     lt  option gt                Is there a better way

User · Accepted Answer

Andreas Grech was pretty close    it s actually this  note the reference to this instead of the item in the loop    var  dropdown       dropdown      each result  function          dropdown append     lt option   gt    val this ImageFolderID  text this Name

User · Answer

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              lt option gt  lt  option gt    val text  html text

User · Answer

Below is the Jquery way of populating a drop down list whose id is  FolderListDropDown     getJSON   Admin GetFolderList    function result        for  var i   0  i  lt  result length  i              var elem       lt option gt  lt  option gt             elem attr  value   result i  ImageFolderID           elem text result i  Name           elem appendTo    select FolderListDropDown

User · Answer

getJSON   Admin GetFolderList    function result        var options       options          don t forget error handling        each result  function item            options append     lt option   gt    val item ImageFolderID  text item Name                  What I m doing above is creating a new  lt option gt  element and adding it to the options list  assuming options is the ID of a drop down element   PS My javascript is a bit rusty so the syntax may not be perfect

User · Answer

Other approach with ES6  fetch  https   restcountries eu rest v1 all      then  response    gt        return response json           then  countries    gt        var options   document getElementById  someSelect        countries forEach  country    gt          options appendChild new Option country name  country name

User · Answer

here is an example i did on change i get children of the first select in second select  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     lt option   gt    val r res  id  text r res  Nom                              error function r              alert  Error                               enter code here

User · Answer

I use the selectboxes jquery plugin   It turns your example into       idofselect   ajaxAddOption   Admin GetFolderList        false

User · Answer

For a newbie like me to JavaScript let alone JQuery  the more JavaScript way of doing it is  result forEach d  gt    quot  dropdown quot   append new Option d d

User · Answer

Sure - make options an array of strings and use  join     rather than    every time through the loop  Slight performance bump when dealing with large numbers of options     var options         getJSON   Admin GetFolderList    function result        for  var i   0  i  lt  result length  i              options push   lt option value               result i  ImageFolderID     gt              result i  Name    lt  option gt                   theSelect   html options join             Yes  I m still working with strings the whole time  Believe it or not  that s the fastest way to build a DOM fragment    Now  if you have only a few options  it won t really matter - use the technique Dreas demonstrates if you like the style  But bear in mind  you re invoking the browser s internal HTML parser i 2 times  rather than just once  and modifying the DOM each time through the loop    with a sufficient number of options  you ll end up paying for it  especially on older browsers   Note  As Justice points out  this will fall apart if ImageFolderID and Name are not encoded properly

User · Answer

I have been using jQuery and calling a function to populate drop downs   function loadDropDowns name value       var ddl     Categories        ddl  append   lt option value      value      gt     name     lt  option gt

User · Answer

The fastest way is this      getJSON   Admin GetFolderList    function result            var optionsValues     lt select gt              each result  function item                optionsValues      lt option value      item ImageFolderID      gt     item Name     lt  option gt                        optionsValues      lt  select gt            var options       options            options replaceWith optionsValues             According to this link is the fastest way because you wrap everything in a single element when doing any kind of DOM insertion

User · Answer

I ve read that using document fragments is performant because it avoids page reflow upon each insertion of DOM element  it s also well supported by all browsers  even IE 6     x000D   x000D  var fragment   document createDocumentFragment    x000D   x000D    each result  function     x000D    fragment appendChild     lt option   gt    val this ImageFolderID  text this Name  0    x000D      x000D   x000D      options   append fragment   x000D   x000D   x000D    I first read about this in CodeSchool s JavaScript Best Practices course   Here s a comparison of different approaches  thanks go to the author

User · Answer

Or maybe   var options       options      each data  function         options append new Option this text  this value

User · Answer

function LoadCategories         var data           var url     Url Action  GetCategories    InternalTables           getJSON url  null  function  data            data     map data  function  item  a                return   lt option value     item Value     gt     item Description     lt  option gt                            ddlCategory   html   lt option value  0  gt Select lt  option gt                 ddlCategory   append data join

User · Answer

I found this to be working from jquery site    getJSON    Admin GetFolderList    function  data       var options       dropdownID        each  data  function key  val        options append new Option key  val

User · Answer

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 lt sary length-1 i                     document getElementById  select1   options i 1    new Option sary i                    document getElementById  select1   options i 1  value   sary i

User · Answer

I hope it helps  I usually use functions instead write all code everytime           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] jQuery: Best practice to populate drop down?

Examples related to jquery

Examples related to select