Populate dropdown select with array using jQuery

Question

I am trying to populate a dropdown select with an array using jQuery   Here is my code              Add the list of numbers to the drop down here         var numbers       1  2  3  4  5             each numbers  function val  text                    items   append                      lt option gt  lt  option gt    val val  html text                                        END   But I m getting an error   The each function is something I am got off this website   Is it bombing out because I m using a one-dimensional array   I want both the option and the text to be the same

User · Answer

The solution I used was to create a javascript function that uses jquery:

This will populate a dropdown object on the HTML page. Please let me know where this can be optimized - but works fine as is.

function util_PopulateDropDownListAndSelect(sourceListObject, sourceListTextFieldName, targetDropDownName, valueToSelect)
{
    var options = '';

    // Create the list of HTML Options
    for (i = 0; i < sourceListObject.List.length; i++)
    {
        options += "<option value='" + sourceListObject.List[i][sourceListTextFieldName] + "'>" + sourceListObject.List[i][sourceListTextFieldName] + "</option>\r\n";
    }

    // Assign the options to the HTML Select container
    $('select#' + targetDropDownName)[0].innerHTML = options;

    // Set the option to be Selected
    $('#' + targetDropDownName).val(valueToSelect);

    // Refresh the HTML Select so it displays the Selected option
    $('#' + targetDropDownName).selectmenu('refresh')
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

User · Answer

The array declaration has incorrect syntax  Try the following  instead   var numbers     1  2  3  4  5    The loop part seems right    each numbers  function val  text                    items   append      lt option gt  lt  option gt    val val  html text                       there was also a   missing here   As  Reigel did seems to add a bit more performance  it is not noticeable on such small arrays

User · Answer

function validateForm        var success   true      resetErrorMessages        var myArray               linkedServiceDonationPurpose   each function            myArray push   this  val                     linkedServiceDonationPurpose   each function        for   var i   0  i  lt  myArray length  i   i   1             for   var j   i 1  j  lt  myArray length  j   j   1               if myArray i     myArray j   amp  amp     this  val      myArray j                      this  next   div    html  Duplicate item selected                    success false                                      if  success            return true        else           return false            function resetErrorMessages                 error   each function                  this  html

User · Answer

Since I cannot add this as a comment  I will leave it here for anyone who finds backticks to be easier to read  Its basically  Reigel answer but with backticks  var numbers    1  2  3  4  5   var option       for  var i 0 i lt numbers length i        option      lt option value   numbers i   gt   numbers i   lt  option gt          items   append option

User · Answer

You can also do this   var list       items   0      HTMLSelectElement   each numbers  function index  text         list options list options length    new Option index  text

User · Answer

var qty   5  var option       for  var i 1 i  lt   qty i        option      lt option value     i      gt     i     lt  option gt          items   append option

User · Answer

Try for loops   var numbers    1  2  3  4  5    for  var i 0 i lt numbers length i            lt option  gt    val numbers i   html numbers i   appendTo   items          Much better approach   var numbers    1  2  3  4  5   var option       for  var i 0 i lt numbers length i        option      lt option value     numbers i       gt     numbers i      lt  option gt          items   append option

User · Answer

A solution is to create your own jquery plugin that take the json map and populate the select with it    function                  fn fillValues   function options             var settings     extend                datas   null                complete   null              options             this each  function                var datas   settings datas              if datas   null                      this  empty                    for var key in datas                         this  append   lt option value    key     gt   datas key    lt  option gt                                                 if   isFunction settings complete                    settings complete call this                                       jQuery      You can call it by doing this        select   fillValues  datas your map       The advantages is that anywhere you will face the same problem you just call             fillValues  datas your map       Et voila    You can add functions in your plugin as you like

[jquery] Populate dropdown select with array using jQuery

Examples related to jquery