Invoke cfquery for state/province retrieval when country selected on same page

I have a coldfusion generated selection list that defaults a country selection according to visitor location.

Further down the page is a state/ province list with a select query with the country input from the country selected in the list above.

I want to pass the country to the query depending on reselection of country so the appropriate states/provinces selection is selected further down the page without the user havin to leave the page.

Eg May arrive on page with Canada preselected but visitor may want to select USA , Australia etc.

The dynamic/ select input field is free format entry for countries without states,

Solution using ColdFusion6/ java script

Tip of page

<cfinclude template = "include_country_select_housaesit.cfm">

  <CFSWITCH EXPRESSION="#PassedCountry#">
  

	
 	<CFCASE Value="Australia,United States,Canada">
	
	    <cfif isDefined ("url.sta")
		and url.sta GT " ">
		
		<cfoutput>
		<CFSELECT Name="Crit1_Value" 
		Message="Please select State " 
		QUERY="GetStates"
		Size=1 
		Value="State"
		Selected = "#url.sta#"
		Display="State"
		Required="Yes">
		</CFSELECT>
		</cfoutput>
 	   
	   <cfelse>
	   
	    <CFSELECT Name="Crit1_Value" 
		Message="Please select State " 
		QUERY="GetStates"
		Size=1 
		Value="State"
		Display="State"
		Required="Yes">
		</CFSELECT>
		
		</cfif>
		
	</CFCASE>
	<CFDEFAULTCASE>
		<CFINPUT Type="Text" Name="Crit1_Value" 

		Maxlength="30"
		Size="20"  >
	</CFDEFAULTCASE>
	
</CFSWITCH>

Open in new window

Web ServersJavaScript

Last Comment

Ian White

8/22/2022 - Mon

Proculopsis

5/20/2011

You can use something dynamic, as below but loading it asynchronously via ajax might be better for you:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<title>http://www.experts-exchange.com/Software/Server_Software/Web_Servers/ColdFusion/Q_27049864.html</title>
<script type="text/javascript" src="http://filedb.experts-exchange.com/incoming/2011/05_w20/458595/jquery-1.5.2.min.js"></script>
<script type="text/javascript">

var world = {
  "Australia": [ "New South Wales", "Victoria", "Queensland", "Western Australia", "South Australia", "Australian Capital Territory", "Tasmania", "Northern Territory" ],
  "United States": [ "Alaska", "South Dakota", "Wyoming", "Montana", "North Dakota", "Vermont" ],
  "Canada": [ "Ontario", "Quebec", "Nova Scotia", "New Brunswick", "Manitoba", "British Columbia", "Prince Edward Island", "Saskatchewan", "Alberta", "Newfoundland and Labrador" ]
};

jQuery(document).ready( function() {

  for ( var country in world ) {
    $("#country").append( $("<option/>").text( country ) );
  };
  $("#country").change( countryChange );
  countryChange.apply( $("#country") );

});

function countryChange() {
  var country = $(this).val();
  $("#state").empty();
  for ( var state in world[country] ) {
    $("#state").append( $("<option/>").text( world[country][state] ) );
  }
}

</script>

</head> 
<body> 

<select id="country"></select>
<select id="state"></select>

</body>
</html>