This article will guide you through the process of populating a select element with the content of an asynchronously loaded JSON file.

The number of items within the collection is not important, but it is worth noting that our collection contains 3 elements: This JSON data could be served as a result of a webserver API request or simply a JSON text file located on your host machine. The HTML for this article is as simple as simple can be.

As a general rule I prefer to include JavaScript code at the foot of a HTML document. Placing JavaScript at the head of the document generally seems counter-intuitive to me.

Adding options to select tag using jquery - JSFiddle

If the JavaScript is the first part of the document to load, not only must the HTML wait until it has been parsed but the JavaScript has no DOM to manipulate yet. If your DOM and JavaScript are complex and lengthy the pause between requesting a document and it rendering on screen can be noticeable.

In essence this causes the content of the function to execute only once the DOM is ready for manipulating — eg.

When it has loaded. The interesting bit is how we load the JSON data and populate this rather dull select element. Firstly, we get a local reference to the select element.

Next we initiate the getJSON function. Fire this HTML document up in your favourite browser and notice that the dull empty select element is now a dull, but populated select element:.

Try updating your person.

No errors, no warning, no indication that something has failed — just no content. You are commenting using your WordPress.

You are commenting using your Twitter account.

You are commenting using your Facebook account. Notify me of new comments via email. Notify me of new posts via email. Developer Dan's Blog Menu Skip to content. Update your HTML to include this jQuery snippet: Replace your current script block with: We now have an explicit success: Once we have the JSON data the method by which we populate the select element is the same.

We now have an explicit error function. In this instance we simply place a single option into the select element informing the user that there are no people available.

Auto-populating Select Boxes using jQuery & AJAX

Accurate Session Timeout notification using Javascript: February 16, at March 31, at Leave a Reply Cancel reply Enter your comment here Fill in your details below or click an icon to log in: Email Address never made public. NET CSS CSS3 HTML HTML5 Javascript jQuery JSON MVC Useful Web Links Grid System HTML5 Boilerplate jQuery Move the Web Forward. Create a free website or blog at WordPress.