<!--- my_form.cfm --->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#product_id").change(function() {
jQuery.ajax({
url: "get_detail.cfm?product_id=" + jQuery("#product_id").val()
, type: "get"
, success: function(result) {
jQuery("#product_detail").html(result);
}
});
});
});
</script>
<form method="post" action="">
<select id="product_id">
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Cherry</option>
</select>
<div id="product_detail"></div>
</form>
<!--- get_detail.cfm --->
<!--- You replace this with query --->
<cfswitch expression="#url.product_id#">
<cfcase value="1">My color is red.</cfcase>
<cfcase value="2">My color is yellow.</cfcase>
<cfcase value="3">My color is dark red.</cfcase>
<cfdefaultcase>Invalid product id</cfdefaultcase>
</cfswitch>