[thelist] Double drop down lists

Matt Warden mwarden at gmail.com
Mon Mar 28 13:23:40 CST 2005


Darin,

On Mon, 28 Mar 2005 09:52:16 -0800, Darin Lang <sub at doolang.com> wrote:
> I want to have 3 simple lists
> Countries - US, Canada
> States - [50 states]
> Provinces - [10 Provinces]
> 
> accessed through two dynamic drop down menus, so that if you choose a
> province from the combined list of provinces and states, it switches
> the country drop down to "Canada"
> Or if you select "Canada" the states/provinces drop down only lists
> provinces. etc.
> 
> I am sure someone has already figured this out, but i can't find it.

Well, you're talking about two different things. Either you have three
lists and you want the country list to be dependent on whether someone
selects a province or a state; or, you have two lists and the second
state/province list gets populated or filtered based on what is
selected in the country list.

If the former, you would just do something like this:

document.getElementById('selProvince').onchange = function() { 
  document.getElementById('selCountry').selectedIndex = getIdxCountry('Canada');
}

document.getElementById('selState').onchange = function() { 
  document.getElementById('selCountry').selectedIndex = getIdxCountry('USA');
}

your function getIdxCountry(str) would either return hard coded
indeces or you would loop through the options collection (of counrty)
looking for option.value=str and return that index.

If you want the latter, that's a bit more complicated. Basically, you
would have arrays in javascript with the values of the two possible
option lists, and you would remove all the options (backwards, if you
want to avoid an IE bug) and then add all the new options based on the
correct array (either of states or of provinces). If this is what you
want and you need more help, let us know.


-- 
Matt Warden
Miami University
Oxford, OH, USA
http://mattwarden.com


This email proudly and graciously contributes to entropy.


More information about the thelist mailing list