Skip to content

Instantly share code, notes, and snippets.

@edwardbeckett

edwardbeckett/call.cfm

Created September 27, 2012 19:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save edwardbeckett/3796005 to your computer and use it in GitHub Desktop.
Save edwardbeckett/3796005 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery Dynamic Selects
Raw
call.cfm
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
/*
* Load the form change handlers on doc ready ...
*
* */
$('#form').on('change','#state',function(){
reloadCounties();
reloadCities();
});
$('#form').on('change','#county',function(){
reloadCities();
});
/*
* Load up the state list for the select on doc ready ...
*
* */
$.ajax({
type:'GET',
data:{
method:"getStates"
},
url:'./com/remote.cfc',
dataType:'json',
success:function (data) {
var stateOptions = $('#state');
var html = '';
for (var i = 1; i < data.length; i++) {
html += '<option value="' + data[i][0] + '">' + data[i][1] + '</option>';
}
stateOptions.append(html);
}
});
/*
* @function changeCounties
* @param string state
*
* */
function changeCounties(state) {
$.ajax({
type : 'GET',
data : {
method : 'getCounties',
state : $('#state').val()
},
url : './com/remote.cfc',
dataType: 'json',
success : function (data) {
var countyOptions = $('#county');
var countyData = '<option value="0">County</option>';
for(var i=0; i<data.length; i++) {
countyData += '<option value="' + data[i][1] + '">' + data[i][1] + '</option>';
}
countyOptions.append(countyData);
}
});
}
/*
* @function changeCities
*
* @param string state
* @param string county
*
* */
function changeCities(state,county) {
$.ajax({
type : 'GET',
data : {
method : 'getCities',
state : $('#state').val(),
county : $('#county').val()
},
url : './com/remote.cfc',
dataType: 'json',
success : function (data) {
var cityOptions = $('#city');
var cityData = '<option value="0">City</option>';
for(var i=0; i<data.length; i++) {
cityData += '<option value="' + data[i][0] + '">' + data[i][1] + '</option>';
}
cityOptions.append(cityData);
}
});
}
/*
* @function reloadCounties
*
* @Desc Tears down the option elements when the parent select change handler fires
* Calls @changeCounties to rebuild the option elements
*
* */
function reloadCounties () {
if($('#county option').length > 0) {
$('#county').slice(0,('#county option').length).empty();
changeCounties($('#state').val());
}
}
/*
* @function reloadCities
*
* @Desc Tears down the option elements when the parent select change handler fires
* Calls @changeCities to rebuild the option elements
* */
function reloadCities() {
if ($('#city option').length > 0) {
$('#city').slice(0,('#city option').length).empty();
changeCities($('#state').val(), $('#county').val());
}
}
});
</script>
<style type="text/css">
#main {margin: 0 auto;}
#form select {width: 300px; font-size: 1.2em; margin: 0 10px}
</style>
</head>
<body>
<div id='main'>
<form name="form" id="form">
<select name="state" id="state">
<option value='0'>State</option>
</select>
<select name="county" id="county">
<option value='0'>County</option>
</select>
<select name="city" id="city">
<option value='0'>City</option>
</select>
</form>
</div>
</body>
</html>
Raw
remote.cfc
<cfcomponent displayname="remote" output="false">
<cfset application.dsn = 'YOUR_DSN'>
<cffunction name="getStates" access="remote" returnType="string" returnformat="JSON" output="false">
<!--- Define variables --->
<cfset var qStates="">
<!---<cfset var result=ArrayNew(2)>--->
<cfset var result=arrayNew(2) />
<cfset var i=0>
<!--- Get data --->
<cfquery name="qStates" datasource="#application.dsn#">
SELECT State, StateFullName
FROM states
GROUP BY State
ORDER BY StateFullName ASC
</cfquery>
<!--- Convert results to array --->
<cfloop index="i" from="1" to="#qStates.RecordCount#">
<cfset result[i][1]=qStates.State[i]>
<cfset result[i][2]=qStates.StateFullName[i]>
</cfloop>
<cfset result = serializeJSON(result) />
<!--- And return it --->
<cfreturn result>
</cffunction>
<cffunction name="getCounties" access="remote" returnType="string" returnformat="JSON" output="false">
<cfargument name="state" required="true" />
<!--- Define variables --->
<cfset variables.state = arguments.state />
<cfset var qCounties="">
<!---<cfset var result=ArrayNew(2)>--->
<cfset var result=arrayNew(2) />
<cfset var i=0>
<!--- Get data --->
<cfquery name="qCounties" datasource="#application.dsn#">
SELECT State, CountyName
FROM states
WHERE state = '#variables.state#'
GROUP BY CountyName
ORDER BY CountyName ASC
</cfquery>
<!--- Convert results to array --->
<cfloop index="i" from="1" to="#qCounties.RecordCount#">
<cfset result[i][1]=qCounties.State[i]>
<cfset result[i][2]=qCounties.CountyName[i]>
</cfloop>
<cfset result = serializeJSON(result) />
<!--- And return it --->
<cfreturn result>
</cffunction>
<cffunction name="getCities" access="remote" returnType="string" returnformat="JSON" output="false">
<cfargument name="state" required="true" />
<cfargument name="county" required="true" />
<!--- Define variables --->
<cfset variables.state = arguments.state />
<cfset variables.county = arguments.county />
<cfset var qCities = "">
<cfset var result = arrayNew(2)/>
<cfset var i = 0>
<!--- Get data --->
<cfquery name="qCities" datasource="#application.dsn#">
SELECT DISTINCT CountyName, CityAliasName
FROM states
WHERE state = '#variables.state#'
AND CountyName = '#variables.county#'
ORDER BY CityAliasName ASC
</cfquery>
<!--- Convert results to array --->
<cfloop index="i" from="1" to="#qCities.RecordCount#">
<cfset result[i][1]=qCities.CountyName[i]>
<cfset result[i][2]=qCities.CityAliasName[i]>
</cfloop>
<cfset result = serializeJSON(result) />
<!--- And return it --->
<cfreturn result>
</cffunction>
</cfcomponent>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment