Select dropdown with array using jQuery

Question

I am trying to populate a dropdown 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( $('<option></option>').val(val).html(text) ); // END 

But I get an error message. Each function is what I got from this website.

Is it a bombing because I use a one-dimensional array? I want both options and text to be the same.

Answer 1

Try for loops:

 var numbers = [1, 2, 3, 4, 5]; for (var i=0;i<numbers.length;i++){ $('<option/>').val(numbers[i]).html(numbers[i]).appendTo('#items'); } 

---

A much better approach:

 var numbers = [1, 2, 3, 4, 5]; var option = ''; for (var i=0;i<numbers.length;i++){ option += '<option value="'+ numbers[i] + '">' + numbers[i] + '</option>'; } $('#items').append(option); 

Answer 2

An array declaration has the wrong syntax. Instead, try the following:

 var numbers = [ 1, 2, 3, 4, 5] 

The loop element seems correct

 $.each(numbers, function(val, text) { $('#items').append( $('<option></option>').val(val).html(text) ) }); // there was also a ) missing here 

Since @Reigel seems to add a bit more performance (it is not noticeable on such small arrays)

Answer 3

You can also do this:

 var list = $('#items')[0]; // HTMLSelectElement $.each(numbers, function(index, text) { list.options[list.options.length] = new Option(index, text); }); 

Answer 4

 var qty = 5; var option = ''; for (var i=1;i <= qty;i++){ option += '<option value="'+ i + '">' + i + '</option>'; } $('#items').append(option); 

Answer 5

The solution is to create your own jquery plugin that accepts a json card and populates it with a selection.

 (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('<option value="'+key+'"+>'+datas[key]+'</option>'); } } if($.isFunction(settings.complete)){ settings.complete.call(this); } }); } }(jQuery)); 

You can call it by following these steps:

 $("#select").fillValues({datas:your_map,}); 

The benefits are that wherever you run into the same problem, you simply cause

  $("....").fillValues({datas:your_map,}); 

Et voila!

You can add features to your plugin as you like

Answer 6

 function validateForm(){ var success = true; resetErrorMessages(); var myArray = []; $(".linkedServiceDonationPurpose").each(function(){ myArray.push($(this).val()) }); $(".linkedServiceDonationPurpose").each(function(){ for ( var i = 0; i < myArray.length; i = i + 1 ) { for ( var j = i+1; j < myArray.length; j = j + 1 ) if(myArray[i] == myArray[j] && $(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(''); });`` } } 

Answer 7

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

This will populate the dropdown on the HTML page. Let me know where it can be optimized, but it works great as it 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>