populate one dropdownlist from another using jquery | dynamic select box | dynamic dropdown

Below is the fix for how to populate one dropdown with another using json and Jquery.




$("#json-one").change(function() {
				var $dropdown = $(this);
				$.getJSON("data.json", function(data) {
					var key = $dropdown.val();
					var vals = [];
					switch(key) {
						case 'beverages':
							vals = data.beverages.split(",");
						case 'snacks':
							vals = data.snacks.split(",");
						case 'base':
							vals = ['Please choose from above'];
					var $jsontwo = $("#json-two");
					$.each(vals, function(index, value) {


	"beverages": "Coffee,Coke,beer",
	"snacks": "Chips,Cookies"


I Am suresh(suresh kumar )a Web developer,Freelancer,webdesigner,UI developer from bangalore. Got 6+ yrs of IT experience . I specialize in standards-based XHTML, CSS and JavaScript web development. Each site I develop is built to be search engine friendly (SEO), using the latest development principles and techniques.

You may also like...

3 Responses

  1. Good web site! I truly love how it is easy on my eyes and the data are well written. I’m wondering how I might be notified whenever a new post has been made. I have subscribed to your RSS which must do the trick! Have a great day!

  2. Tyler M says:

    You should not append each option to the DOM like that. If anything, create a document fragment to append them to first and then append the document fragment. There are various other methods, such as building a string for all the options and setting the innerHTML or creating the collection via jQuery.

  3. I just couldn’t leave your web site before suggesting that I extremely loved the standard info a person provide for your guests? Is gonna be again frequently to check up on new posts

Leave a Reply

Your email address will not be published. Required fields are marked *