Web Development Blog

by Ei Sabai Nyo

17 Jul, 2009

Dropdown menu population using JSON and jQuery    

This example shows how to populate dropdown menus automatically with values from a JSON object using jQuery. Among other things, it demonstrates:

  • How to define a JSON object in Javascript
  • How to write a custom function in jQuery using $.fn
  • How to traverse a JSON object using jQuery
  • How to populate a dropdown menu dynamically using jQuery

Javascript

<script type="text/javascript">
/* <![CDATA[ */

(function($) {

$.fn.changeType = function(){

	var data = [
		{
		"department": "IT",
		"jobs": [
		        {"title":"Programmer"},
		        {"title":"Solutions Architect"},
		        {"title":"Database Developer"}
		        ]
		},
		{"department": "Accounting",
		"jobs": [
			    {"title":"Accountant"},
			    {"title":"Payroll Officer"},
			    {"title":"Accounts Clerk"},
			    {"title":"Analyst"},
			    {"title":"Financial Controller"}
			    ]
		},
		{
		"department": "HR",
		"jobs": [
			    {"title":"Recruitment Consultant"},
			    {"title":"Change Management"},
			    {"title":"Industrial Relations"}
			    ]
		},
		{
		"department": "Marketing",
		"jobs": [
			    {"title":"Market Researcher"},
			    {"title":"Marketing Manager"},
			    {"title":"Marketing Co-ordinator"}
			    ]
		}
		]

		var options_departments = '<option>Select<\/option>';
		$.each(data, function(i,d){
			options_departments += '<option value="' + d.department + '">' + d.department + '<\/option>';
		});
		$("select#departments", this).html(options_departments);

		$("select#departments", this).change(function(){
			var index = $(this).get(0).selectedIndex;
			var d = data[index-1];  // -1 because index 0 is for empty 'Select' option
			var options = '';
			if (index > 0) {
				$.each(d.jobs, function(i,j){
		                    options += '<option value="' + j.title + '">' + j.title + '<\/option>';
				});
			} else {
				options += '<option>Select<\/option>';
			}
			$("select#jobs").html(options);
		})
};

})(jQuery);

$(document).ready(function() {
	$("form#search").changeType();
});

/* ]]> */
</script>

HTML

<form id="search" action="" name="search">
	<select name="departments" id="departments">
		<option>Select</option>
	</select>

	<select name="jobs" id="jobs">
		<option>Select</option>
	</select>
</form>

Recommended Books on jQuery

Love what you've just read? Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
Your name:   Your email:  

4 Responses to “Dropdown menu population using JSON and jQuery”

  1. is there an example for that? cause i can’t imagine how will it be
    thanks

  2. arjun says:

    i required fetch data from database not from xml file or defined data ……………………….

    how we r do this ?????????

    please reply……………….

  3. eisabai says:

    arjun: There are quite a few ways to achieve that, one of them is to load the data required for the dropdown from a page and then process that data. The page will be in php, perl, ruby, .net or whatever back-end language you are using that gets data from your database. Then you can use jQuery.get method to load data via HTTP GET and populate the dropdown after the data is loaded. More on jQuery.get() method can be found here: http://api.jquery.com/jQuery.get/

  4. Kyaw Thura says:

    Hi, Ma Sabai.
    Thanks for the post.
    It really help me.

Profile PicHello! Welcome to Web development blog! My name is Ei Sabai and on this blog, I write about web development, mobile app development, latest web technologies and the likes. Read more about me or have a look at some of the tips & resources I've written.
Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
We do NOT spam.
Your name:  
Your email:  

Tips & Resources

Tips & Resources
WordPress Web Hosting
Recommended web hosting providers for WordPress 3.0
iPhone Native App Development
Important steps into iPhone app development for beginners
iPhone Web App Development
Tips for iPhone web app development
Coupons for Web Developers
Get discounts on web hosting, domain names, templates, etc
10 Useful jQuery Snippets
Easy-to-use jQuery snippets for any website
HTML Email Newsletter
Step-by-step tutorial on how to code an HTML email newsletter
  • bluehost Hosting $6.95/month
  • Joomla Templates

Recommended Book

Categories