Web Development with jQuery®

element with an id attribute
having the value addressCountryWrapper and then fi nding the element within. Then the
element’s src and alt attributes are set using jQuery’s attr() method, and the path for the fl ag is
defi ned, taking into account the structure of fi les in this book’s source code download materials.
Then the fi lename is appended, and the ISO2 code is converted to lowercase because each fl ag image
is named using lowercase characters. This may not be a problem for some servers, such as Windows
or some Mac servers that are case-insensitive, but UNIX and Linux servers, including some Mac
servers (depending on how the Macs have been formatted), are case-sensitive, and having the incor-
rect case for the fi lename would cause the image to fail to load.
The next step is to remove all state options. First, query for the element with the id name
addressState, and then call jQuery’s empty() method to remove all options.
// Remove all of the options
$('select#addressState').empty();
The next step is to add the administrative subdivisions from the XML fi le as options. jQuery’s
find() method locates all the elements in the XML fi le. Then you enumerate over each

element using the each() method.
// Set the states...
xml.find('state').each(
function()
{
Now you create each element and append each element to the element:
$('select#addressState').append(
$('')
.attr('value', $(this).attr('id'))
.text($(this).text())
);
Because you’re working within the callback function provided to the each() method, each
element is passed to that callback function as this, just as it is done with (X)HTML. To access
jQuery’s methods, you wrap this in a call to the jQuery object $(this). You set the value attribute
for each element, which will be the unique numeric id passed in each element as
the attribute id="0", where zero is the unique id. To get to that id, all you have to do is call jQuery’s
attr() method with the attribute’s name as the fi rst argument. Then all that’s left to do is set the
option’s label, which is done with a simple call to jQuery’s text() method, which retrieves the text
content of the element.
The last item is to set the label for the “state.” Because Canadians use provinces, Britons use coun-
ties, and Americans use states, you need to use the right label, which is provided in the XML fi le as
the element. To fi nd the element you want to change, you query the DOM for the
[http://www.it-ebooks.info](http://www.it-ebooks.info)