Populating a second select box depending of the first select box option in coldfusion

Populating a second select box depending of the first select box option  binding with coldfusion component

	<cfoutput>
	<cfform name="registration" id="registration">
	<h2>Detailed Registration:</h2>
	<cfquery name="getStates" datasource="TestDB">
	select *
	from shema_countries
	</cfquery>
	<div class="registrationLabel">
	Country
	</div>
	<div class="registrationValue">
	<cfselect name="Country" id="Country">
	<option id="state0" value="0">--State--</option>
	<cfloop query="getStates">
	<option id="state#ctr_code#" value="#ctr_code#">#ctr_name#</option>
	</cfloop>
	</cfselect>
	</div>
	<div class="registrationLabelNS" style="width:65px;">
	State
	</div>
	<div class="registrationValue">
	<cfselect name="State" id="State" bind="cfc:update.myFunction1({Country})" bindOnLoad="yes" display="StateName" value="StateID" selected="" style="width:220px;" />
	</div>
	</cfform>
	</cfoutput>

view raw registration.cfm hosted with ❤ by GitHub

	<cfcomponent>
	<cffunction name="myFunction1" access="remote" returntype="any">
	<cfargument name="Country" type="string" required="yes">
	<cfquery name="getCities" datasource="TestDB">
	select *
	from shema_states
	where StateCtrCode = <cfqueryparam cfsqltype="cf_sql_varchar" value="#Country#">
	order by StateName
	</cfquery>
	<cfreturn getCities>
	</cffunction>
	</cfcomponent>

view raw update.cfc hosted with ❤ by GitHub