JavaScript
Article
By Sam Deering

jQuery XML Combo Box

By Sam Deering

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


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

  • Pingback: jQuery XML Combo Box « Big Engine Media()

  • jacinto

    Nice tutorial…. thanks! :D

  • moonyloon

    It just makes a nice dropdown that doesn’t do anything. There’s a list containing first set, second set, and third set. I have put everything where it should go. FYI it doesn’t work.

Recommended
Sponsors
Get the latest in JavaScript, once a week, for free.