Change dropdown list based on selection of a different dropdown list.

I have a problem with dropdown list of countries. When one is selected, I need the list of states or provences from that selected country to populate the next dropdown or a text field to be displayed so one can enter a 'region'.
For information the dropdown contries is in the same form with states or provences.

I am not very familiar with javascript, but I understand there is a way to this using javascript.

Thanks for any and all help!

 

so since your using CF i'm assuming you've got a database set up as well.

in that db we'll say you have a table containing provinces and countries named regions..


these two queries will be what you use to populate your menus

<cfquery name="countries" datasource="yourDS">
	SELECT	DISTINCT
		country
	FROM	regions
	ORDER BY
		country
</cfquery>

<cfquery name="states" datasource="yourDS">
	SELECT	province,
		country
	FROM	regions
	ORDER BY	
		country,
		province
</cfquery>

Code (markup):

somewhere in your form..

<select id="country" name="country" onchange="pop_provinces()">
	<option value="">--Choose a Country--</option>
	<cfoutput query="countries">
		<option value="#country#">#country#</option>
	</cfoutput>
</select>

<select id="province" name="province" disabled="disabled">
</select>

Code (markup):

and the javascript would look something like this... **this javascript must be contained in in the same file since it also uses CF code

function pop_provinces()
{
	province_list = document.getElementById("province");
	province_list.innerHTML = "";

	switch(document.getElementById("country").value)
	{
		<cfoutput query="countries">
		case "#country#":
			pop_#country#_provinces(province_list);
			break;
		</cfoutput>
	}
	
}
<cfoutput query="countries">
function pop_#country#_provinces(prov_list)
{
	<cfloop query="states">
		<cfif states.country EQ countries.country>
			var opto = document.createElement('option');
			opto.innerHTML="#states.province#";
			opto.value="#states.province#";
			prov_list.appendChild(opto);
		</cfif>
	</cfloop>
}
</cfoutput>

Code (markup):

this may need a little or a lot of work.. i'm not entirely sure.. i took it from something i did a while back.. either way it should be a start

if this isn't helpful just search "dynamic select menus" or something like that

 

of course, you may want to have the province list filled to start with since users with JS disabled will see no province options....

my suggestion, even though this would be an incredibly long list.. would be to change this
<select id="province" name="province" disabled="disabled">
</select>

to this
<select id="province" name="province" disabled="disabled">
<cfoutput query="countries">
<optgroup label="#country#">
<cfloop query="states">
<cfif states.country EQ countries.country>
<option value="#states.province#">#states.province#</option>
</cfif>
</cfloop>
</optgroup>
</cfoutput>
</select>