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 strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Help on dynamic combo box

Status
Not open for further replies.
ummul21

ummul21

Programmer
Jun 23, 2003
21
SG
Hi,
I'm new in JavaScript programming, i'm stuck at this dynamic combo box.

I'm having a table with:
1. company
2. category
3. subcategory
4. app_cd
5. app_name

What I want is,
1. when I select company(1st combo), all the category for the company is pulled in 2nd combo.
And when I select category (2nd combo), all the subcategory for the company and category is pulled in 3rd combo.
And when I select subcategory (3rd combo), all the app_cd for the company, category and subcategory is pulled in 4th combo. Until the last one

I managed to do until the 3rd combo box pull value based on 1st & 2nd combo box value, But i did not managed to pull the 4th & 5th combo based on 1st, 2nd & 3rd combo value.

My 4th & 5th combo is blank.

I would appreciate if someone can help me with this. Thanks.

below is my code:
Code: 
<form method="get" action="budget_add.asp" onSubmit="return checkSubmit(this);" id=form1 name=form1>
		<table>
			<tr>
				<td class="helpdeskText1" width=10%>Budget for Year:</td>
				<td class="helpdeskText1" width=40%>
					<select name=b_year>
					<option value="FY06" selected>FY06</option>
					<option value="FY05">FY05</option>
					</select>
				</td>
				<td class="helpdeskText1" width=10%>&nbsp;</td>
				<td class="helpdeskText1" width=40%>&nbsp;</td>
			</tr>
			<tr>
				<td class="helpdeskText1" width="10%">Budget Company:</td>
 				<td width="40%">
 					<%CompSQL = "SELECT distinct comp_cd FROM eBudget_approved"
					SET rsComp = objConn.Execute(CompSQL)%>
                    <select class="helpdeskText3" name="b_comp" onchange="changeCat(this.options[this.selectedIndex].value, b_cat);">
						<option value="[Please Select]" selected>[Please Select]</option>
						<%DO UNTIL rsComp.EOF%>
							<option value="<%=rsComp("comp_cd")%>"><%=rsComp("comp_cd")%></option>
							<%rsComp.MoveNext()
						LOOP%>
                    </select>
                    <script>
					function changeCat(Comp1, Cat1) {
						while (Cat1.options.length > 0) {
							Cat1.options[0] = null;
						}
						Cat1.options[0] = new Option("[Please Select]", "[Please Select]", true);
							   									   										
						<%rsComp.MoveFirst()%>
									
						<%do until rsComp.EOF%>
							if (Comp1 == "<%=rsComp("comp_cd")%>") {
								<%
								CatSQL = "SELECT distinct cat_cd, comp_cd FROM eBudget_approved " & _
										"where comp_cd = '" & rsComp("comp_cd") & "'"
								SET rsCat = objConn.Execute(CatSQL)
								CompCount = 1%>
											
								<%DO UNTIL rsCat.EOF%>
									Cat1.options[<%=CompCount%>] = new Option("<%=rsCat("cat_cd")%>", "<%=rsCat("cat_cd")%>");
					
									<%	CompCount = CompCount + 1
									rsCat.MoveNext()
								LOOP%>
							}
							<%rsComp.MoveNext()
						LOOP%>
					}
					</script>
                </td>
				<td class="helpdeskText1" width="10%">Budget Category:</td>
				<td width="40%">
					<select class="helpdeskText3" name="b_cat" onchange="changeSubCat(this.options[this.selectedIndex].value, b_subcat);">
                    </select>
                    <script>
						function changeSubCat(Cat12, SubCat1) {
							while (SubCat1.options.length > 0) {
								SubCat1.options[0] = null;
							}
							SubCat1.options[0] = new Option("[Please Select]", "[Please Select]", true);
							   									   										
							<%rsCat.MoveFirst()%>
									
							<%do until rsCat.EOF%>
								if (Cat12 == "<%=rsCat("cat_cd")%>") {
									<%
									SubCatSQL = "SELECT distinct subcat_cd, comp_cd, cat_cd FROM eBudget_approved " & _
												"where comp_cd = '" & rsCat("comp_cd") & "' and cat_cd = '" & rsCat("cat_cd") & "'"
												
									SET rsSubCat = objConn.Execute(SubCatSQL)
									CatCount = 1%>
											
									<%DO UNTIL rsSubCat.EOF%>
										SubCat1.options[<%=CatCount%>] = new Option("<%=rsSubCat("subcat_cd")%>", "<%=rsSubCat("subcat_cd")%>");
					
										<%	CatCount = CatCount + 1
										rsSubCat.MoveNext()
										LOOP%>
								}
								<%rsCat.MoveNext()
							LOOP%>
						}
					</script>
                </td>
			</tr>
			<tr>
				<td class="helpdeskText1" width="10%">Budget SubCategory:</td>
 				<td width="40%">
 					<select class="helpdeskText3" name="b_subcat" onchange="changeAppcd(this.options[this.selectedIndex].value, b_app);">
                    </select>
                    <script>
						function changeAppcd(Subcat, App1) {
							while (App1.options.length > 0) {
								App1.options[0] = null;
							}
							App1.options[0] = new Option("[Please Select]", "[Please Select]", true);
							   									   										
							<%rsSubCat.MoveFirst()%>
									
							<%do until rsSubCat.EOF%>
								if (Subcat == "<%=rsSubCat("subcat_cd")%>") {
									<%
									AppSQL = "SELECT distinct app_cd, cat_cd, comp_cd, subcat_cd FROM eBudget_approved " & _
											"where comp_cd = '" & rsSubCat("comp_cd") & "' and cat_cd = '" & rsSubCat("cat_cd") & "' and subcat_cd = '" & rsSubCat("subcat_cd") & "'"
												
									SET rsApp = objConn.Execute(AppSQL)
									AppCount = 1%>
											
									<%DO UNTIL rsApp.EOF%>
										App1.options[<%=AppCount%>] = new Option("<%=rsApp("app_cd")%>", "<%=rsApp("app_cd")%>");
					
										<%	AppCount = AppCount + 1
										rsApp.MoveNext()
										LOOP%>
								}
								<%rsSubCat.MoveNext()
							LOOP%>
						}
					</script>
                </td>
				<td class="helpdeskText1" width="10%">&nbsp;</td>
				<td width="40%"></td>
			</tr>
			<tr>
					<td class="helpdeskText1" width="10%">Budget Application:</td>
					<td width="40%">
						<select class="helpdeskText3" name="b_app" onchange="changeApp(this.options[this.selectedIndex].value, b_app_name);">
                            </select>
                            <script>
						function changeApp(Appn, Appn1) {
							while (Appn1.options.length > 0) {
								Appn1.options[0] = null;
							}
							appd1.options[0] = new Option("[Please Select]", "[Please Select]", true);
							   									   										
							<%rsApp.MoveFirst()%>
									
							<%do until rsApp.EOF%>
								if (Appn == "<%=rsApp("app_cd")%>") {
									<%
									AppdSQL = "SELECT distinct app_name, comp_cd, cat_cd, subcat_cd, app_cd FROM eBudget_approved " & _
												"where comp_cd = '" & rsApp("comp_cd") & "' and cat_cd = '" & rsApp("cat_cd") & "' and subcat_cd = '" & rsApp("subcat_cd") & "' and app_cd = '" & rsApp("app_cd") & "'"
									SET rsAppd = objConn.Execute(AppdSQL)
									AppdCount = 1%>
											
									<%DO UNTIL rsAppd.EOF%>
										Appn1.options[<%=AppCount%>] = new Option("<%=rsAppd("app_name")%>", "<%=rsAppd("app_name")%>");
					
										<%	AppdCount = AppdCount + 1
										rsAppd.MoveNext()
										LOOP%>
								}
								<%rsApp.MoveNext()
							LOOP%>
						}
					</script>
                    </td>
                    <td class="helpdeskText1" width="10%">Application Detail:</td>
 					<td width="40%"><select class="helpdeskText3" name="b_app_name"></select></td>
				</tr>
				<tr>
				<td class="helpdeskText1" width="10%">&nbsp;</td>
 				<td width="40%">&nbsp;</td>
				<td class="helpdeskText1" width="10%"><input name="submit" type="submit" value="Show"></td>
				<td width="40%"></td>
			</tr>
		</table>
	</form>


Thanks & Regards,
[flowerface]
Ummul
 
Sort by date Sort by votes

Can you post the client-side source?

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
I'm sorry, I really new to the web programming.

Can I know what do you mean by client-side source?

Thanks & Regards,
[flowerface]
Ummul
 
Upvote 0 Downvote

What you have posted is server-side code. You need to post the code that actually gets delivered to the browser - this is what you see when you view the source in the browser (i.e. client-side).

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
ok, got it.

here is the code:
Code: 
<form method="get" action="budget_add.asp" onSubmit="return checkSubmit(this);" id=form1 name=form1>
		<table>
			<tr>
				<td class="helpdeskText1" width=10%>Budget for Year:</td>
				<td class="helpdeskText1" width=40%>
					<select name=b_year>
					<option value="FY06" selected>FY06</option>
					<option value="FY05">FY05</option>
					</select>
				</td>
				<td class="helpdeskText1" width=10%>&nbsp;</td>
				<td class="helpdeskText1" width=40%>&nbsp;</td>
			</tr>
			<tr>
				<td class="helpdeskText1" width="10%">Budget Company:</td>
 				<td width="40%">
 					
                    <select class="helpdeskText3" name="b_comp" onchange="changeCat(this.options[this.selectedIndex].value, b_cat);">
						<option value="[Please Select]" selected>[Please Select]</option>
						
							<option value="BPM">BPM</option>
							
							<option value="BTC">BTC</option>
							
							<option value="BTL">BTL</option>
							
							<option value="FJB">FJB</option>
							
							<option value="FKL">FKL</option>
							
							<option value="FKT">FKT</option>
							
                    </select>
                    <script>
					function changeCat(Comp1, Cat1) {
						while (Cat1.options.length > 0) {
							Cat1.options[0] = null;
						}
						Cat1.options[0] = new Option("[Please Select]", "[Please Select]", true);
							   									   										
						
							if (Comp1 == "BPM") {
								
									Cat1.options[1] = new Option("CAPITAL EXPENSES", "CAPITAL EXPENSES");
					
									
									Cat1.options[2] = new Option("OPERATION COST-MAINTENENCE", "OPERATION COST-MAINTENENCE");
					
									
									Cat1.options[3] = new Option("OTHER BUDGET MONITOR BY IT/MIS", "OTHER BUDGET MONITOR BY IT/MIS");
					
									
							}
							
							if (Comp1 == "BTC") {
								
									Cat1.options[1] = new Option("CAPITAL EXPENSES", "CAPITAL EXPENSES");
					
									
							}
							
							if (Comp1 == "BTL") {
								
									Cat1.options[1] = new Option("CAPITAL EXPENSES", "CAPITAL EXPENSES");
					
									
									Cat1.options[2] = new Option("OPERATION COST-MAINTENENCE", "OPERATION COST-MAINTENENCE");
					
									
							}
							
							if (Comp1 == "FJB") {
								
									Cat1.options[1] = new Option("CAPITAL EXPENSES", "CAPITAL EXPENSES");
					
									
									Cat1.options[2] = new Option("OPERATION COST-MAINTENENCE", "OPERATION COST-MAINTENENCE");
					
									
									Cat1.options[3] = new Option("OTHER BUDGET MONITOR BY IT/MIS", "OTHER BUDGET MONITOR BY IT/MIS");
					
									
							}
							
							if (Comp1 == "FKL") {
								
									Cat1.options[1] = new Option("CAPITAL EXPENSES", "CAPITAL EXPENSES");
					
									
							}
							
							if (Comp1 == "FKT") {
								
									Cat1.options[1] = new Option("CAPITAL EXPENSES", "CAPITAL EXPENSES");
					
									
									Cat1.options[2] = new Option("OPERATION COST-MAINTENENCE", "OPERATION COST-MAINTENENCE");
					
									
							}
							
					}
					</script>
                </td>
				<td class="helpdeskText1" width="10%">Budget Category:</td>
				<td width="40%">
					<select class="helpdeskText3" name="b_cat" onchange="changeSubCat(this.options[this.selectedIndex].value, b_subcat);">
                    </select>
                    <script>
						function changeSubCat(Cat12, SubCat1) {
							while (SubCat1.options.length > 0) {
								SubCat1.options[0] = null;
							}
							SubCat1.options[0] = new Option("[Please Select]", "[Please Select]", true);
							   									   										
							
								if (Cat12 == "CAPITAL EXPENSES") {
									
										SubCat1.options[1] = new Option("APPLICATION DEVELOP", "APPLICATION DEVELOP");
					
										
										SubCat1.options[2] = new Option("H/W PERIPHERAL", "H/W PERIPHERAL");
					
										
								}
								
								if (Cat12 == "OPERATION COST-MAINTENENCE") {
									
										SubCat1.options[1] = new Option("DATA COMMUNICATION", "DATA COMMUNICATION");
					
										
										SubCat1.options[2] = new Option("OPERATING LEASE", "OPERATING LEASE");
					
										
										SubCat1.options[3] = new Option("SERVER MAINTENANCE", "SERVER MAINTENANCE");
					
										
								}
								
						}
					</script>
                </td>
			</tr>
			<tr>
				<td class="helpdeskText1" width="10%">Budget SubCategory:</td>
 				<td width="40%">
 					<select class="helpdeskText3" name="b_subcat" onchange="changeAppcd(this.options[this.selectedIndex].value, b_app);">
                    </select>
                    <script>
						function changeAppcd(Subcat, App1) {
							while (App1.options.length > 0) {
								App1.options[0] = null;
							}
							App1.options[0] = new Option("[Please Select]", "[Please Select]", true);
							   									   										
							
								if (Subcat == "DATA COMMUNICATION") {
									
										App1.options[1] = new Option("T", "T");
					
										
								}
								
								if (Subcat == "OPERATING LEASE") {
									
										App1.options[1] = new Option("T", "T");
					
										
								}
								
								if (Subcat == "SERVER MAINTENANCE") {
									
										App1.options[1] = new Option("T", "T");
					
										
								}
								
						}
					</script>
                </td>
				<td class="helpdeskText1" width="10%">&nbsp;</td>
				<td width="40%"></td>
			</tr>
			<tr>
					<td class="helpdeskText1" width="10%">Budget Application:</td>
					<td width="40%">
						<select class="helpdeskText3" name="b_app" onchange="changeApp(this.options[this.selectedIndex].value, b_app_name);">
                            </select>
                            <script>
						function changeApp(Appn, Appn1) {
							while (Appn1.options.length > 0) {
								Appn1.options[0] = null;
							}
							appd1.options[0] = new Option("[Please Select]", "[Please Select]", true);
							   									   										
							
								if (Appn == "T") {
									
										Appn1.options[2] = new Option("T", "T");
					
										
								}
								
						}
					</script>
                    </td>
                    <td class="helpdeskText1" width="10%">Application Detail:</td>
 					<td width="40%"><select class="helpdeskText3" name="b_app_name"></select></td>
				</tr>
				<tr>
				<td class="helpdeskText1" width="10%">&nbsp;</td>
 				<td width="40%">&nbsp;</td>
				<td class="helpdeskText1" width="10%"><input name="submit" type="submit" value="Show"></td>
				<td width="40%"></td>
			</tr>
		</table>
	</form>

Thanks & Regards,
[flowerface]
Ummul
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
359
Kennelbloke
Kennelbloke
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
264
rogerte
rogerte
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
270
JScannell
JScannell
amrmnabil
  • Locked
  • Question
Dynamic Control Name Access 1
Replies
2
Views
87
amrmnabil
amrmnabil
chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
104
chikwendu
chikwendu

Part and Inventory Search

Sponsor

Back
Top