JavaScript
Article
By Sam Deering

jQuery XML Combo Box

By Sam Deering
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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


--ADVERTISEMENT--

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


option aoption boption 1option 2option 1aoption 2b

Download Source Files

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?