无法使用其他值填充其他下拉菜单-Javascript

Question

I seem to have a problem with Javascript. I am currently trying to use arrays to populate dropdown menus. They are dynamically appearing drop down menus. In my example, the countries and cities and activites are populating correctly for USA. However, for Canada and UK, the activities list is still using the USA's activities list. Can someone tell me what I'm doing wrong? If what I just explained seems a bit confusing, please take a look at the jsfiddle I made here: http://jsfiddle.net/KCz3G/

<title>Page Title</title>

Answer 1

If you use this as a start to store the data, things might get easier:

Simple demo: http://jsfiddle.net/KCz3G/3/

var cities = {
 usa: ['New York|newyorkvalue', ...],
 uk: ['London|londonvalue', ...]
};

var activities = {
 newyorkvalue: ['xxx|yyy', ...],
 londonvalue: ['xxx|yyy', ...]
};

//get cities in usa
for (i=0;i<cities["usa"].length;i++) {

}

Which mean you use/pass the "value text", like londonvalue as a parameter instead of an index to find which array of "something" to populate.

It will give you much more flexibility, still using arrays of values.