i live in the states so needed to add a states field... i've added all the fields and tables so that job posters may select state and then city and post, everything works except i need the ajax code to be added so that the cities get listed based on the state selected, i don't know much javascripting, need this as soon as possible... here's the page that i'm talking about: http://jobspath.com/post/

in the publish-write.tpl i have

<select name="state_id" id="state_id" tabindex="3" onchange="citybystate(this.value)">
{section name="s" loop=$states}
<option value="{$states[s].id}" >{$states[s].name}</option>
{/section}
</select>

basically i need the javascript/php/smarty code so that the code for city_id select menu executes after the state_id is passed to it... as a tip for development, since many countries have different regions, it'd be nice to add a regions field like i added the states right before the cities field and have the cities load based on region.. so when someone in the states wants to use it, they can just rename "region" to "state", and ajax loading would already be implemented, no hassle.. the ajax part should be an easy add to what i already have, too bad i don't know java that well, great thanks to anyone who can help

I did this for a UK installation....
javascript:
location.js

//Applies cascading behavior for the specified dropdowns
function applyCascadingDropdown(sourceId, targetId) {
var source = document.getElementById(sourceId);
var target = document.getElementById(targetId);
if (source && target) {
source.onchange = function() {
displayOptionItemsByClass(target, source.value);
}
displayOptionItemsByClass(target, source.value);
}
}

//Displays a subset of a dropdown's options
function displayOptionItemsByClass(selectElement, className) {
if (!selectElement.backup) {
selectElement.backup = selectElement.cloneNode(true);
}
var options = selectElement.getElementsByTagName("option");
for(var i=0, length=options.length; i<length; i++) {
selectElement.removeChild(options[0]);
}
var options = selectElement.backup.getElementsByTagName("option");
for(var i=0, length=options.length; i<length; i++) {
if (options[i].className==className)
selectElement.appendChild(options[i].cloneNode(true));
}
}

//Binds dropdowns
function applyCascadingDropdowns() {
applyCascadingDropdown("state_id", "city_id");
//We could even bind items to another dropdown
//applyCascadingDropdown("items", "foo");
}

//execute when the page is ready
window.onload=applyCascadingDropdowns;

header.tpl...

added:
<script src="{$BASE_URL}js/location.js" type="text/javascript"></script>

in the place where scripts are included...like line 25

and in the same file...modified the cities dropdown to give them a class:

<select name="city_id" id="city_id" tabindex="4" {if $job.location_outside_ro != '' OR $smarty.post.location_outside_ro_where != ''}disabled="disabled"{/if}>
{section name="c" loop=$cities}
<option class="{$cities[c].state}" value="{$cities[c].id}" {if $smarty.post.city_id == $cities[c].id || $job.city_id == $cities[c].id}selected="selected"{else}{if $user_city.id == $cities[c].id AND !$smarty.post.city_id AND !$job.city_id}selected="selected"{/if}{/if}>{$cities[c].name}</option>
{/section}
</select>