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

			Please Select
			Beverages
			Snacks
		
	
		

	
		
			Please choose from above
		

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("" + value + "");
					});
			
				});
			});

JSON

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