Friday, April 23, 2010

YQL create states Dropdown List

OK, a very simple one today.

Using YQL's upcoming.state table, you can create a simple dropdown list to store either the State name or the State Abbreviation.

HTML Page:

Create a select element, and give it an id of ddlStates.

The jQuery Script:

$(function () {
var query = "select code, name from upcoming.state where country_id = 1 and id <= 51";
$.getJSON(
"http://query.yahooapis.com/v1/public/yql?q=" + encodeURIComponent(query) + "&format=json&callback=?",
function (data) {
$.each(data.query.results,
function (index, item) {
for (i = 0; i < item.length; i++) {
var each = item[i];
var stateName = each.name.toUpperCase();
var stateCode = each.code.toUpperCase();
$('<option></option>').val(stateName).html(stateCode).appendTo("#ddlStates");
}
});
});
});

You'll note here I simply changed it to Uppercase, and used the value of State Name, while displaying the state code.

Download Script at: http://www.joshuablackstone.com/Scripts/StatesDropdown.js

And all this time I was storing the data in a database... Ugh...

0 comments: