WEB TUTORIALS
PRACTICE EXAMPLES
HTML REFERENCES
CSS REFERENCES
PHP REFERENCES
Advertisements

How to Add Options to a Select Box from a JS Object using jQuery

Topic: JavaScript / jQueryPrev|Next

Answer: Use the jQuery $.each() Function

You can use the jQuery $.each() function to easily populate a select box (dropdown list) using the values from a JavaScript object. The $.each() function can be used to iterate over any collection, whether it is an object or an array. Let's try out an example to see how it actually works:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <title>jQuery Add Options to a Select from a JS Object</title>
  • <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  • <script>
  • // Sample JS object
  • var colors = { "1": "Red", "2": "Green", "3": "Blue" };
  •  
  • $(document).ready(function(){
  •     var selectElem = $("#mySelect");
  •     
  •     // Iterate over object and add options to select
  •     $.each(colors, function(index, value){
  •         $("<option/>", {
  •             value: index,
  •             text: value
  •         }).appendTo(selectElem);
  •     });
  • });
  • </script>
  • </head>
  • <body>
  •     <label>Color:</label>
  •     <select id="mySelect">
  •         <option value="0">Select</option>
  •     </select>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.