jainesteer
asked on
dynamic dropdown boxes
I hope that somebody can help
I have taken some code from the solution of https://www.experts-exchange.com/questions/10968981/Populating-DropDowns-from-A-Database.html and have modified it to fit in with my tables.
Given my non-existent knowledge of java, I am very proud to have gotten to my current position. I am able to correctly populate the first drop-down but have fell fowl in the sub-option section.
My tables are
lut_jcu_degrees with field degree as the primary key (varchar2)
lut_discipline_degree with field id as the primary key (number); the field degree is the foreign key (varchar2)
I suspect that my problem could well lie with the fact that the pk/fk are varchar2 - unfortunately I am not in the position to change this as this is information comes to me from an external source.
I am hoping that somebody can help me to re-modify the code so that when an option is selected in the first box, only those corresponding options are displayed through the second drop-down.
Also, I am not sure how I go about actually having the values that do get selected submitted... I can get to this later though, my first priority is to get the two list correlating.
Any help is greatly appreciated.
My code follows
<!--- query the database to retrieve the degrees for the first select control --->
<CFQUERY NAME="qrydegree" DATASOURCE="corpdb" DBTYPE="ODBC">
SELECT degree, description
FROM lut_jcu_degrees
ORDER BY description
</CFQUERY>
<!--- query the database to retrieve the disciplines for the first select control --->
<CFQUERY NAME="qrydisdeg" DATASOURCE="corpdb" DBTYPE="ODBC">
SELECT id, discipline, degree
FROM lut_discipline_degree
ORDER BY discipline
</CFQUERY>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Dynamic Select Box Updates from Cold Fusion</TITLE>
</HEAD>
<!--- serialize the qrytype result set into WDDX --->
<CFWDDX ACTION="CFML2JS"
INPUT="#qrydegree#"
TOPLEVELVARIABLE="jsdegree TLV"
OUTPUT="jsdegree">
<!--- serialize the qryclass result set into WDDX --->
<CFWDDX ACTION="CFML2JS"
INPUT="#qrydisdeg#"
TOPLEVELVARIABLE="jsdisdeg TLV"
OUTPUT="jsdisdeg">
<!--- get the WDDX JavaScript utility object --->
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript" SRC="../CFIDE/scripts/wddx .js">
</SCRIPT>
<!--- start the script to dynamically create the dropdown list --->
<SCRIPT LANGUAGE="JavaScript">
<!--- output the type WDDX packet --->
<CFOUTPUT>#jsdegree#</CFOU TPUT>
<!--- output the class WDDX packet --->
<CFOUTPUT>#jsdisdeg#</CFOU TPUT>
<!--- create a function that runs when the user selects from the first dropdown list --->
function choosenext()
{
<!--- if 'Choose One' is chosen from the first dropdown list populate the second dropdown list with just a blank option --->
if (document.TestForm.Select1 .selectedI ndex==0)
{
document.TestForm.DynamicS elect.opti ons.length =0;
NewOpt=new Option;
document.TestForm.DynamicS elect.opti ons[0]=New Opt;
}
<!--- Update second box --->
else
{
document.TestForm.DynamicS elect.opti ons.length =0;
var BoxNum = 0;
for (var RowNum=0; RowNum<jsdisdegTLV.id.leng th; RowNum++)
{
if (jsdisdegTLV.degree[RowNum ] == document.TestForm.Select1. selectedIn dex)
{
NewOpt=new Option;
NewOpt.value=jcdisdegTLV.i d[RowNum];
NewOpt.text=jcdisdegTLV.di scipline[R owNum];
document.TestForm.DynamicS elect.opti ons[BoxNum ]=NewOpt;
BoxNum++;
}
}
}
document.TestForm.DynamicS elect.opti ons[0].sel ected = true;
}
</SCRIPT>
<BODY>
<!--- the actual form --->
<FORM ACTION="test_action.cfm" METHOD="POST" NAME="TestForm">
Select an option:
<select name="Select1" onChange="choosenext();">
<OPTION VALUE="0">Choose One</OPTION>
<cfoutput query="qrydegree">
<OPTION VALUE=#degree#>#descriptio n#</OPTION >
</cfoutput>
</SELECT>
Sub-option:
<SELECT NAME="DynamicSelect">
<OPTION VALUE="0"> &nbs p; &n bsp; &nbs p; </ OPTION>
</SELECT>
<BR><BR>
<INPUT TYPE="Submit">
</FORM>
</BODY>
</HTML>
I have taken some code from the solution of https://www.experts-exchange.com/questions/10968981/Populating-DropDowns-from-A-Database.html and have modified it to fit in with my tables.
Given my non-existent knowledge of java, I am very proud to have gotten to my current position. I am able to correctly populate the first drop-down but have fell fowl in the sub-option section.
My tables are
lut_jcu_degrees with field degree as the primary key (varchar2)
lut_discipline_degree with field id as the primary key (number); the field degree is the foreign key (varchar2)
I suspect that my problem could well lie with the fact that the pk/fk are varchar2 - unfortunately I am not in the position to change this as this is information comes to me from an external source.
I am hoping that somebody can help me to re-modify the code so that when an option is selected in the first box, only those corresponding options are displayed through the second drop-down.
Also, I am not sure how I go about actually having the values that do get selected submitted... I can get to this later though, my first priority is to get the two list correlating.
Any help is greatly appreciated.
My code follows
<!--- query the database to retrieve the degrees for the first select control --->
<CFQUERY NAME="qrydegree" DATASOURCE="corpdb" DBTYPE="ODBC">
SELECT degree, description
FROM lut_jcu_degrees
ORDER BY description
</CFQUERY>
<!--- query the database to retrieve the disciplines for the first select control --->
<CFQUERY NAME="qrydisdeg" DATASOURCE="corpdb" DBTYPE="ODBC">
SELECT id, discipline, degree
FROM lut_discipline_degree
ORDER BY discipline
</CFQUERY>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Dynamic Select Box Updates from Cold Fusion</TITLE>
</HEAD>
<!--- serialize the qrytype result set into WDDX --->
<CFWDDX ACTION="CFML2JS"
INPUT="#qrydegree#"
TOPLEVELVARIABLE="jsdegree
OUTPUT="jsdegree">
<!--- serialize the qryclass result set into WDDX --->
<CFWDDX ACTION="CFML2JS"
INPUT="#qrydisdeg#"
TOPLEVELVARIABLE="jsdisdeg
OUTPUT="jsdisdeg">
<!--- get the WDDX JavaScript utility object --->
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript" SRC="../CFIDE/scripts/wddx
</SCRIPT>
<!--- start the script to dynamically create the dropdown list --->
<SCRIPT LANGUAGE="JavaScript">
<!--- output the type WDDX packet --->
<CFOUTPUT>#jsdegree#</CFOU
<!--- output the class WDDX packet --->
<CFOUTPUT>#jsdisdeg#</CFOU
<!--- create a function that runs when the user selects from the first dropdown list --->
function choosenext()
{
<!--- if 'Choose One' is chosen from the first dropdown list populate the second dropdown list with just a blank option --->
if (document.TestForm.Select1
{
document.TestForm.DynamicS
NewOpt=new Option;
document.TestForm.DynamicS
}
<!--- Update second box --->
else
{
document.TestForm.DynamicS
var BoxNum = 0;
for (var RowNum=0; RowNum<jsdisdegTLV.id.leng
{
if (jsdisdegTLV.degree[RowNum
{
NewOpt=new Option;
NewOpt.value=jcdisdegTLV.i
NewOpt.text=jcdisdegTLV.di
document.TestForm.DynamicS
BoxNum++;
}
}
}
document.TestForm.DynamicS
}
</SCRIPT>
<BODY>
<!--- the actual form --->
<FORM ACTION="test_action.cfm" METHOD="POST" NAME="TestForm">
Select an option:
<select name="Select1" onChange="choosenext();">
<OPTION VALUE="0">Choose One</OPTION>
<cfoutput query="qrydegree">
<OPTION VALUE=#degree#>#descriptio
</cfoutput>
</SELECT>
Sub-option:
<SELECT NAME="DynamicSelect">
<OPTION VALUE="0"> &nbs
</SELECT>
<BR><BR>
<INPUT TYPE="Submit">
</FORM>
</BODY>
</HTML>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
It sounds like Hart answered your original question since he provided the link that you have used for 2related selects. SO really he should get the points and then you should post a new question for other issues. But, please be clear on what exactly you new issue is because I am a little confused by what you are trying to do.
You have a loop around the CF_TwoSelectsRelated tag.
But your loop goes from 1 to 1 which means it only runs once - so why even have the loop?
You have a loop around the CF_TwoSelectsRelated tag.
But your loop goes from 1 to 1 which means it only runs once - so why even have the loop?
ASKER
I have mastered the whole two related drop down thing for a SINGLE entry, but now would like to give users a first and second preference option. I have included the code to date, and all works except that I can only ever get the last row of data to have entries in both columns. I would REALLY appreciate somebody taking a quick look at the code that I have so far - I know that I have to loop but where to go next is a big mystery.
<CFQUERY NAME="qrydisdeg" DATASOURCE="corpdb" DBTYPE="ODBC">
SELECT LUT_DISCIPLINE_DEGREE.ID, LUT_DISCIPLINE_DEGREE.DISC
FROM (LUT_DISCIPLINE_DEGREE INNER JOIN LUT_JCU_DEGREES ON LUT_DISCIPLINE_DEGREE.DEGR
</CFQUERY>
<table width="800" cellspacing="5" cellpadding="1" border="2" >
<cfloop from="1" to="1" index="x">
<tr>
<CF_TwoSelectsRelated
QUERY="qrydisdeg"
NAME1="webtitle#x#"
NAME2="Discipline#x#"
DISPLAY1="Degree_name"
DISPLAY2="Discipline_name"
VALUE1="Degree"
VALUE2="Discipline"
FORCEWIDTH1="70"
FORCEWIDTH2="70"
SIZE1="1"
SIZE2="1"
AUTOSELECTFIRST="Yes"
EMPTYTEXT1="(choose a course of study)"
EMPTYTEXT2="(now choose a discipline)"
ONCHANGE="updateTable('#x#
FORMNAME="App">
</cfloop>
</table>