Auto-fill text box field values based on pulldown selection

Question

Trying to fill in address, city, state, zip text fields based on option selected in a select form field. The following code works great in Internet Explorer, but in Chrome or Firefox, after making selection, text fields are populated with the word "undefined."
I've found a PHP version of Jquery script here that would probabably fit the bill.
http://stackoverflow.com/questions/3657127/jquery-populate-text-input-from-table-based-on- select-value
Maybe someone has a CF version they could share?
Thanks in advance to any who can point me to a solution for this code, or a better way to accomplish my need.
<!--- Destinations with auto-fill of address, city, etc. --->
<script type="text/javascript">
      function selectAddress(list) {
            // assume first item is empty
            if (list.selectedIndex > 0) {
                  var locationID = list.options[list.selectedIndex].value;
                  var locationAddress = list.options[list.selectedIndex].locationAddress;
                  var locationCity = list.options[list.selectedIndex].locationCity;
              var locationState = list.options[list.selectedIndex].locationState;
              var locationZip = list.options[list.selectedIndex].locationZip;
              document.getElementById('locationID').value = locationID;
                  document.getElementById('locationAddress').value = locationAddress;
                  document.getElementById('locationCity').value = locationCity;
              document.getElementById('locationState').value = locationState;
              document.getElementById('locationZip').value = locationZip;
</script>
<tr>
<td align="right" bgcolor="#FFFFFF" valign="top">Name of Destination</td>
<td align="left" bgcolor="#FFFFFF" valign="top">
   <select name="locationID" onChange="selectAddress(this)" class="smallforms">
             <option value="">SELECT DESTINATION ››››››››››</option>
             <cfoutput query="allLocations">
                   <option value="#locationName#" locationAddress="#allLocations.locationAddress#" locationCity="#allLocations.locationCity#" locationState="#allLocations.locationState#" locationZip="#allLocations.locationZip#">#locationName#</option>
             </cfoutput>
        </select> 
      Other: <cfinput name="destinationNameOther" type="text" class="smallforms" size="75">
      <br />
       <input id="locationID" name="locationID" type="hidden"><br>
         Address:    <input class="smallforms" id="locationAddress"    name="locationAddress"    type="text" size="30"> 
         City:       <input class="smallforms" id="locationCity"    name="locationCity"    type="text" size="20"> 
         State:       <input class="smallforms" id="locationState"    name="locationState"    type="text" size="2"> 
         Zip:       <input class="smallforms" id="locationZip"       name="locationZip"       type="text" size="8"><br />
<br />
</td></tr>

Answer 1

Thanks a million for the help Steve, the array is being created in source as follows: 
<script type="text/javascript">
var addresses = [
   "locationName": "Airport Park School",
   "locationAddress": "",
   "locationCity": "",
   "locationState": "WI",
   "locationZip": ""
   "locationName": "American Legion Golf Course",
   "locationAddress": "1001 Golf Club Road",
   "locationCity": "Wausau",
   "locationState": "WI",
   "locationZip": "54403"
but I'm lost at the
// reference as address[index].locationName...address[index].locationZip where index = 0-[arraysize-1]
direction, and just to double check, you named the Javascript var "addresses", so the "reference as address" s/b "reference as addresses" right?
I've tried many iterations of "onchange" adding other variables (locationCity, locationZip, etc.) but coming up empty.
Anyway, I wish I could buy you a beer or two for the help . . .
Here's where I'm at, which ain't working. If you have a minute to look over, it would be MUCH appreciated. Try not to laugh at my (what's probably ugly) Javascript code:
<!--- Code from Steve @ Adobe.com CF Forum --->
<script type="text/javascript">
var addresses = [
<cfset variables.fs = "" />
<cfoutput query="allLocations">
  #variables.fs#{
   "locationName": "#jsStringFormat(locationName)#",
   "locationAddress": "#jsStringFormat(locationAddress)#",
   "locationCity": "#jsStringFormat(locationCity)#",
   "locationState": "#jsStringFormat(locationState)#",
   "locationZip": "#jsStringFormat(locationZip)#"
  <cfset variables.fs = "," />
</cfoutput>
// reference as address[index].locationName...address[index].locationZip where index = 0-[arraysize-1]
</script>
<tr>
<td align="right" bgcolor="#FFFFFF" valign="top">Name of Destination</td>
<td align="left" bgcolor="#FFFFFF" valign="top">
  <select name="locationID" class="smallforms"
  onChange="var locationAddress = addresses[list.selectedIndex].locationAddress;">
             <option value="">SELECT DESTINATION &#8250;&#8250;&#8250;&#8250;&#8250;&#8250;&#8250;&#8250;&#8250;&#8250;</option>
             <cfoutput query="allLocations">
                   <option value="#locationName#">#locationName#</option>
             </cfoutput>
      </select> 
  Other: <cfinput name="destinationNameOther" type="text" class="smallforms" size="75">
  <br />
  <cfoutput>
   <input id="locationID" name="locationID" type="hidden"><br>
   Address:  <cfinput class="smallforms" id="locationAddress"  name="locationAddress"  type="text" size="30"> 
   City:   <cfinput class="smallforms" id="locationCity"   name="locationCity"  type="text" size="20"> 
   State:   <cfinput class="smallforms" id="locationState"   name="locationState"  type="text" size="2"> 
   Zip:   <cfinput class="smallforms" id="locationZip"   name="locationZip"   type="text" size="8"><br />
  </cfoutput>
<br />
</td></tr>
Thanks again Steve . . . much appreciated!