Im trying to append a static selection at the beginning of this line... obj.selectLocal.options[#idx#].value="#getLocal.location_id#" obj.selectLocal.options[#idx#].text="#getLocal.State#" ...any suggestions ?
By: Megan Garrison
In Search of Dynamic Dependent Lists
by Megan Garrison
For a while now, I've been looking for a certain code sample: dynamic dependent
lists that pull from database tables and work in BOTH IE AND NETSCAPE 4X. I
combed the net far and wide, trying each custom tag and piece of JavaScript I
uncovered, but none seemed to meet my need for both cross-browser compatibility
and ease of use. After a while I stopped looking. Then I read Mike Corbridge's
Multiple dynamic drop-down selection boxes example here at
http://tutorial11.easycfm.com/
"hmmm" I thought. Mike's original script allows
for just two categories, but with a little noodling and a tip from fellow
easyCFM forum member, Irvin, Voila! the example below. So far it works on CF4.5
and CF5 with IE 5 and NS 4.6 My test data was Countries and States/Provinces
with just 2 countries (United States & Canada) and their respective
States/Provinces, as well as using 4 categories of animal species and breeds
within those species. I'm not sure how practical this would be for a BIG set of
categories and list items. After working out the dependent list code example
shown below, I thought I would try my hand at creating a custom tag (my first)
in order to reuse the code as easily as possible. You can check out the results
by clicking here.
The next step in this evolution might be a tutorial implementing WDDX (any
takers?).
meanwhile:
========================================================
2 tables
tblCountries with country_id and country fields
tblLocations with location_id, state, country_id fields
code:
========================================================
<cfquery name="getLocal"
datasource="locate">
SELECT l.location_id, l.state, c.country, c.country_id
FROM tblLocations l
INNER JOIN tblCountries c ON l.country_id = c.country_id
ORDER BY country desc, state
</cfquery>
<html>
<head>
<title>Dynamic JS Dropdowns</title>
<cfset idx = -1>
<cfset mycase = 0>
<!---
The JavaScript is adapted from Mike
Corbridge's Multiple dynamic drop-down selection boxes example
http://tutorial11.easycfm.com/
--->
<script language="JavaScript1.2">
function whichLocal(obj){
switch (obj.selectBorder.selectedIndex){
<!--- use the group attribute to group output by
category --->
<cfoutput query="getLocal"
group="country">
<cfset mycase = mycase + 1>case #mycase#:
<cfset myList = ValueList(getLocal.country_id)>
<cfset numberInCountry = ListValueCount(myList, country_id)>
obj.selectLocal.length=#numberInCountry#<cfoutput><cfset idx = idx + 1>
obj.selectLocal.options[#idx#].value="#getLocal.location_id#"
obj.selectLocal.options[#idx#].text="#getLocal.State#"</cfoutput>
break;
<cfset idx = -1>
</cfoutput>
}
}
</script>
</head>
<body>
<form name="myform"
action="myactionpage.cfm"
method="post">
<table>
<tr>
<td>OPTIONS<br>
<select name="selectBorder"
onchange="whichLocal(this.form)">
<option>-
Select Country-</option>
<!---
again, use the group attribute to group output by category --->
<cfoutput
query="getLocal"
group="country">
<option
value="#Country_id#">#Country#</option>
</cfoutput>
</select>
<select name="selectLocal"
onchange="whichLocal(this.form)">
<option> </option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option>
--------------------------------- </option>
</select>
<input type="submit"
name="Submit" value="Submit">
</td>
</tr>
</table>
</form>
</body>
</html>
About This Tutorial
Author: Megan Garrison
Total Views: 58,123
Submission Date: February 24, 2003
Last Update Date: June 05, 2009
All Tutorials By This Autor: 1
Skill Level: Intermediate
Platforms Tested: CF5Total Views: 58,123
Submission Date: February 24, 2003
Last Update Date: June 05, 2009
All Tutorials By This Autor: 1
Discuss This Tutorial
-
-
hai.. if i push button back at navigator second state not display.. how i want to display data if i want to back or forward i hope someone can give a solution.. thank
-
Has anyone else had this code for dynamic multiple selects work only in IE? Works like a charm in IE but in other browsers, the second select just sits there blank .. any suggestions would be most helpful.
-
This is great code! Could I adapt this technique to allow me to populate a list with users and then have a number of checkboxes that would check or uncheck based on which user I selected in the list?
-
Hi, That works great but my friend having 4.0 version which seems to be very old and I couldn't help him. Can anyone help me how this code will work on his 4.0 version because there isn't any ListValueCount() function, and he is getting error at that line? Please.
-
Just wanted to say thank you for taking the time to post an excellent tutorial. I am glad to took the other static tutorial and made it dynamic. This is perfect for a business directory that I have been burdened to develop for my work. I look forward to trying it out.
-
Here is what i need; I have a page where user will select a Category which is the main select list and there are 2 different tables, one having Types according to the Category_ID and the other table having Frequency according to the Category_ID. So user will just select the Category and then the Types and Frequency dropdown will be filled up according to the selected category. I did try with your code it works fine to populate one related dropdown, but now i am stuck how 2 dropdowns will be populated.
-
How would this be done with just one table instead of two? For example, for the first listbox: SELECT DISTINCT CountryName FROM tblCountry ORDER BY CoundtryName ASC then, for the second listbox: SELECT State FROM tblCountry WHERE CountryName = [result form first query] ORDER BY State ASC
-
After making selections on http://www.childcareseekers.com/tag/myactionpage.cfm, upon submit how would you get these selections into a new row in a Access Database table, with http://www.childcareseekers.com/tag/myactionpage.cfm then presenting an acknowledgement such as "Thank you for your input" I have obtained a similar dependent drop down list script from this site, and I want the selections to upload into a new row in my database table... problem - it only inserts a row, a blank row with no data. Hoping to figure out a solution.
-
hi there, this tutorial is great! i was just wondering if anyone has implemented this tag using dynamic forms eg. a record is to be edited so the options need to be already populated?
Advertisement
