Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Drop list populates second drop list - dynamic.

Status
Not open for further replies.
CTekMedia

CTekMedia

Programmer
Oct 5, 2001
634
US
Hi all. I'm building an ecommerce site for a client and they have want a search function built. NP but they want users to be able to select a list of categories (from a DB) which will then autopopulate a second drop box with subcategories - from a second table in the db. Categories and subcats are related, i.e., only some subcats go to each category and they mix and match.

I have done autopopulating second drop boxes using JS but not with dynamic data - and I don't think my JS skills are up to it.

This is a fairly common function - I just haven't built it before and I'm up against very tight deadlines (2 ecommerce sites in 6 weeks). I'll take a CF or JS solution or a combo if anyone has code to share.

Thanks!


 
Sort by date Sort by votes
google is your best friend.

in action:

source code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Related cfselects</title>
</head>

<body>
<cfscript>
state = queryNew("stateid,name");
queryAddRow(state);
querySetCell(state, 'stateid','1');
querySetCell(state, 'name','California');
queryAddRow(state);
querySetCell(state, 'stateid','2');
querySetCell(state, 'name','New York');
queryAddRow(state);
querySetCell(state, 'stateid','3');
querySetCell(state, 'name','Arizona');
queryAddRow(state);
querySetCell(state, 'stateid','4');
querySetCell(state, 'name','Illinois');

city = queryNew("stateid,name,cityid");
addRow(city, '1','Laguna Beach','LB' );
addRow(city, '1','Los Angeles','LA' );
addRow(city, '1', 'Newport Beach', 'NB');
addRow(city, '1', 'San Francisco' ,'SF');
addRow(city, '1', 'San Diego' ,'SD');

addRow(city, '2', 'Manhattan' ,'M');
addRow(city, '2', 'Brooklyn' ,'B');
addRow(city, '3', 'Phoenix' ,'P');
addRow(city, '3', 'Elgin' ,'E');
addRow(city, '3', 'Tucson' ,'T');
addRow(state, '4','Chicago', 'C');

function addRow( rs, stateid, name, cityid)
{
queryAddRow(city);
querySetCell(city,'stateid',stateid);
querySetCell(city,'name',name);
querySetCell(city,'cityid',cityid);
}
</cfscript>

<cfsavecontent variable="actionPopulate">
if(_global.arrCities == undefined) _global.arrCities = selectCity.dataProvider.slice(0);

var arrCities:Array = _global.arrCities;
selectCity.removeAll();

for(var i = 0; i < arrCities.length; i++)
{
var item = arrCities.data.split('|');
if(item[1] == selectState.value )
{
selectCity.addItem(arrCities.label,item[0]);
}
}
selectCity.enabled = (selectCity.length >0) ? true:false;
</cfsavecontent>

<cfform name="myform" format="flash" width="400">
<cfformgroup type="hbox">
<cfselect queryposition="below" label="State"
name="selectState" query="state" value="stateid"
display="name" width="200"
onChange="#actionPopulate#">
<option>Please select a parent category</option>
</cfselect>
<cfselect queryposition="below" disabled="true" label="City"
name="selectCity" width="200">
<cfoutput query="city"><option value="#cityid#|#stateid#">#name#</option></cfoutput>
</cfselect>
</cfformgroup>
</cfform>
</body>
</html>



 
Upvote 0 Downvote
Thanks for the offer and thank you both for your help. I split the search over two pages in the interest of saving time. I'll build a solution for myself sometime soon, however, so that I can have it in my box of code. Bottom line - I have to improve my JS.


 
Upvote 0 Downvote
something i wrote a long time ago:

<cfquery name="getStates" datasource="jetan">
SELECT stateID, state
FROM state
ORDER BY state
</cfquery>
<cfquery name="getCounties" datasource="jetan">
SELECT countyID, stateID, countyName
FROM county
ORDER BY countyName
</cfquery>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Related Selects</title>
<script language="javascript" type="text/javascript">
var arZone = new Array;
<cfoutput query="getCounties">
var oZone = new Object;
oZone.stateID = #stateID#;
oZone.countyID = #countyID#;
oZone.countyName = "#countyName#";
arZone[arZone.length] = oZone;
</cfoutput>
function popPage(v1)
{
document.form1.selectCounty.options.length = 0;
for (var i=0; i<arZone.length; i++)
{
if ( arZone.stateID == v1)
{
var objOption = new Option(arZone.countyName, arZone.countyID);
with (document.form1.selectCounty)
{
options[options.length] = objOption;
}
}
}
}
</script>
</head>

<body>
<form name="form1" method="post" action="">
<p>select the state :
<select name="selectState" onChange="popPage(this.value)">
<option value="-">*** Select One ***</option>
<cfoutput query="getStates">
<option value="#stateID#">#state#</option>
</cfoutput>
</select>
</p>
<p>select the county:
<select name="selectCounty">
<option value="*">-- Pick a State First --</option>
</select>
</p>
<p>&nbsp; </p>
</form>
</body>
</html>

It was a version of a related select example on webtricks

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

ScarletJake
  • Locked
  • Question
Parts List with Dynamic Callouts on Drawings
Replies
0
Views
178
ScarletJake
ScarletJake
szeiss
  • Locked
  • Question
List Function Confusion
Replies
2
Views
316
r937
r937
mptwoadmin
  • Locked
  • Question
Summing Dynamic Variables
Replies
6
Views
304
cfSearching
cfSearching
mletendre
  • Locked
  • Question
dreamweaver cs5 mysql and PHP filter by drop down list
Replies
0
Views
167
mletendre
mletendre
jimmyshoes
  • Locked
  • Question
Dynamic drop down list help 1
Replies
2
Views
112
jimmyshoes
jimmyshoes

Part and Inventory Search

Sponsor

Back
Top