Select Values From A JSON Object Using JQuery - W3resource

jQuery: Select values from a JSON object using jQuery Last update on July 22 2025 12:39:21 (UTC/GMT +8 hours)

jQuery Practical exercise Part - I : Exercise-13

Select values from a JSON object using jQuery.

Sample solution :

HTML Code :

<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-git.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Select values from a JSON object using jQuery.</title> </head> <body> <div id="divSelect"></div> </body> </html>

JavaScript Code :

colors = { "color1": "Red", "color2": "Green", 'color3': "Blue" }; $.each(colors, function(key, value) { $('#divSelect').append($("<option/>", { value: key, text: value })); });

Go to:

  • jQuery Practical Exercises Home ↩
  • jQuery Exercises Home ↩

PREV : Move one DIV element inside another using jQuery. NEXT : Add a list elements within an unordered list element using jQuery.

See the Pen jquery-practical-exercise-13 by w3resource (@w3resource) on CodePen.

Contribute your code and comments through Disqus.

Tag » Add Element Json Jquery