Select Box

As you probably already know a Select box is a simple thing to create in HTML especially if you only have a couple of option entries, but what if you wanted to display all 50 states in the USA? You wouldn't want to type out every single state would you?

You could use a web programming language like Coldfusion or PHP to get the states from a database and write all your option values for you but you don't know either of those web programming languages, you only know HTML and a little Javascript and you managed to find on the Internet a full listing of the states as an XML document. How then can you create your dropdown using nothing but HTML, a little Javascript and your XML document?

What You Need

For this tutorial you will only need two of the Spry library files:
SpryData.js
xpath.js
The SpryData.js library file contains all of the basic data functionality while the xpath.js library file contains functionality that makes it easy for us to work with XML data.

The Javascript

In order to create the select box that is populated with the XML data we need to set create a Spry dataset that holds our XML data. So in all you need to make a link to where you have your two Spry library files and then create a Spry dataset to hold the XML data.

We create a Javascript variable (myDs) to hold the Spry XML Dataset. The creation of the dataset itself is done with new Spry.Data.XMLDataset() the first argument we pass is the location of our XML data. The second argument states/state is telling the XMLDataset where to find the actual data we are interested in.

The XML

If you look at the XML data's structure you will see that the outermost or root XML tag is states, we are interested in all of the children nodes of states so we tell the XMLDataset constructor this with states/state.

The HTML

So as you can see in the Javascript section we really only have one line of Javascript code in order to create our dataset. Now lets look at the HTML that we need to create our select box. Every time you want to use Spry data it needs to be inside of a Spry region, without a Spry region your spry code just won't function. Spry regions can be either span or div tags with the special attribute spry:region="datasetName". Inside of the spry region you set up the HTML select and include a special spry attribute spry:repeatchildren="datasetName". As the name suggests this attribute tells Spry to repeat what is between the open and closing select tags for each row of data in the dataset. What we end up with then is an option tag for each entry in our XML dataset. The next thing to note is the option tags themselves and more specifically the curly braces {}. What is between the curly braces gets replaced by Spry in our case you see {name}. If you look at the XML data you will see that it is a tag inside the state tag and when Spry reads in the XML data name becomes a column in our rows of data along with url.

So there we have it, a data driven select box with one line of javascript and a couple special Spry attributes

The Result

{name}