jQuery XML Combo Box

This is an easy way to use jquery and xml to populate a combo box (drop down) which could be used for populating dynamic options to the combo box based upon an xml configuration data file (which contains the options). This method could be useful for forms that have constantly changing options.

Here is how you do it.

HTML Code

              loading

jQuery Code

$(document).ready(function(){
			$.ajax({
				type: "GET",
				url: "dropdown.xml",
				dataType: "xml",
				success: function(xml) {
					var select = $('#mySelect');
					$(xml).find('menuitem').each(function(){
						var title = $(this).find('title').text();
						select.append(""+title+"");
						$(this).find('value').each(function(){
							var value = $(this).text();
							select.append(""+value+"");
						});
					});
					select.children(":first").text("please make a selection").attr("selected",true);
				}
			});
		});

XML Code

	
    	first set
 		
 			option a
 			option b
 		
 	
   	
    	second set
 		
 			option 1
 			option 2
 		
 	
 	
    	third set
 		
 			option 1a
 			option 2b
 		
 	
 

Download Source Files