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.

HTML


	
		

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(",");
							break;
						case 'snacks':
							vals = data.snacks.split(",");
							break;
						case 'base':
							vals = ['Please choose from above'];
					}
					
					var $jsontwo = $("#json-two");
					$jsontwo.empty();
					$.each(vals, function(index, value) {
						$jsontwo.append("");
					});
			
				});
			});

JSON

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

suri

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

Add Comment Register



Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>