Dynamic Cascading Drop Downs?
I have a table with which I have all my categories. It is structured as such:
CategoryTableName
catID INT(4) PK
parentID INT(4)
gCat NVARCHAR(255)
The data in it may be something like this:
0 0 Top
1 0 Games
2 1 Doom
3 2 Doom 1
4 2 Doom 2
I can make a dynamic drop down, problem is I don't know what to do for cascading it. I need to make it I can have a drop down for the child categories based on what is selected in the first drop down, and down the line of children (so it needs to generate a drop down based on every parent drop down?).
I am assuming some sort of javascript is needed for it, but I have very limited knowledge of javascript.
Please help?
CategoryTableName
catID INT(4) PK
parentID INT(4)
gCat NVARCHAR(255)
The data in it may be something like this:
0 0 Top
1 0 Games
2 1 Doom
3 2 Doom 1
4 2 Doom 2
I can make a dynamic drop down, problem is I don't know what to do for cascading it. I need to make it I can have a drop down for the child categories based on what is selected in the first drop down, and down the line of children (so it needs to generate a drop down based on every parent drop down?).
I am assuming some sort of javascript is needed for it, but I have very limited knowledge of javascript.
Please help?
ASKER
exactly....unlimited
Definitely a tricky one. I am thinking that doing a SQL statment like outlined here would allow you to potentially create this with a single recordset: http://www.aspfaqs.com/webtech/sqlguru/q120899-1.shtml
I was working on something but I have to head out so maybe I will have something tomorrow if nobody else responds by then...
I was working on something but I have to head out so maybe I will have something tomorrow if nobody else responds by then...
Why not use a treecontrol instead of cascading dropdownlistboxes?
ASKER
treecontrol?
It's not for navigation. It is for editting a link directories listing. I need to be able to select the category(s) the link is in.
It's not for navigation. It is for editting a link directories listing. I need to be able to select the category(s) the link is in.
ASKER
sorry. That plus it needs to be component less
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
http://www.portalfanatic.com/temp/temp1.asp
I don't get anything in the drop-down. I've changed what I needed to change as far as the fieldnames, and tablenames
I don't get anything in the drop-down. I've changed what I needed to change as far as the fieldnames, and tablenames
ASKER
here's what I have:
temp1.asp:
<% @Language = VBScript %>
<!--#include virtual="/includes/inc/db.
<html>
<head>
<title>Multiple Selects</title>
<script type="text/javascript" src="/includes/js/AjaxRequ
<script language="JavaScript">
function buildChildSelect(formfield
page = 'temp2.asp.asp?id='+ formfield.value;
target = document.getElementById('o
AjaxRequest.get(
{
'url': page
,'onSuccess':function(req)
,'onError':function(req){ target.innerHTML += 'There was an error processing your request';}
,'onTimeout':function(req)
}
);
}
</script>
<style>
SELECT
{
FONT-SIZE: 14px;
MARGIN-BOTTOM: 10px;
DISPLAY: block;
}
</style>
</head>
<body>
<form method="post">
<table border="0" cellpadding="5" cellspacing="0" align="left">
<tr>
<td>
<%
strSQL = "SELECT M1.gcID, M1.gCat FROM ModLinksCats M1 INNER JOIN ModLinksCats M2 ON M1.gcID = M2.gcID WHERE M1.gcID = 0"
Set oConn = Server.CreateObject("ADODB
oConn.Open(inrsConn)'inrsC
Set oRS = oConn.Execute(strSQL)
Response.Write "<select name=""initialselect"" onChange=""buildChildSelec
Response.Write "<option value="""">Select One</option>" & vbcrlf
Do While Not oRS.EOF
If CStr(intStoreID) = CStr(oRS(0)) Then
Response.Write "<option value=""" & oRS(0) & """ selected>" & oRS(1) & "</option>" & vbcrlf
Else
Response.Write "<option value=""" & oRS(0) & """>" & oRS(1) & "</option>" & vbcrlf
End If
oRS.MoveNext
Loop
Response.Write "</select>" & vbcrlf
Set oRS = Nothing
oConn.Close
Set oConn = Nothing
%>
<div id="otherSelects"></div>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" value="Submit" name="cmdSubmit" />
</td>
</tr>
</table>
</form>
</body>
</html>
temp2.asp:
<% @Language = VBScript %>
<script type="text/javascript" src="/includes/js/AjaxRequ
<%
intID = Request.QueryString("id")
strSQL = "SELECT M1.gcID, M1.gCat, M1.parentID FROM ModLinksCats M1 INNER JOIN ModLinksCats M2 ON M1.gcID = M2.gcID WHERE M1.parentID = " & intID
If intID <> "" Then
connStr = "Provider=Microsoft.Jet.OL
Set oConn = Server.CreateObject("ADODB
oConn.Open(inrsConn)
Set oRS = oConn.Execute(strSQL)
If Not(oRS.EOF) Then
Response.Write "<select name=""select" & intID & """ onChange=""buildChildSelec
Response.Write "<option value="""">Select One</option>" & vbcrlf
End If
Do While Not oRS.EOF
If CStr(intStoreID) = CStr(oRS(0)) Then
Response.Write "<option value=""" & oRS(0) & """ selected>" & oRS(1) & "</option>" & vbcrlf
Else
Response.Write "<option value=""" & oRS(0) & """>" & oRS(1) & "</option>" & vbcrlf
End If
oRS.MoveNext
Loop
If Not(oRS.EOF) Then
Response.Write "</select>" & vbcrlf
End If
Set oRS = Nothing
oConn.Close
Set oConn = Nothing
End If
%>
temp1.asp:
<% @Language = VBScript %>
<!--#include virtual="/includes/inc/db.
<html>
<head>
<title>Multiple Selects</title>
<script type="text/javascript" src="/includes/js/AjaxRequ
<script language="JavaScript">
function buildChildSelect(formfield
page = 'temp2.asp.asp?id='+ formfield.value;
target = document.getElementById('o
AjaxRequest.get(
{
'url': page
,'onSuccess':function(req)
,'onError':function(req){ target.innerHTML += 'There was an error processing your request';}
,'onTimeout':function(req)
}
);
}
</script>
<style>
SELECT
{
FONT-SIZE: 14px;
MARGIN-BOTTOM: 10px;
DISPLAY: block;
}
</style>
</head>
<body>
<form method="post">
<table border="0" cellpadding="5" cellspacing="0" align="left">
<tr>
<td>
<%
strSQL = "SELECT M1.gcID, M1.gCat FROM ModLinksCats M1 INNER JOIN ModLinksCats M2 ON M1.gcID = M2.gcID WHERE M1.gcID = 0"
Set oConn = Server.CreateObject("ADODB
oConn.Open(inrsConn)'inrsC
Set oRS = oConn.Execute(strSQL)
Response.Write "<select name=""initialselect"" onChange=""buildChildSelec
Response.Write "<option value="""">Select One</option>" & vbcrlf
Do While Not oRS.EOF
If CStr(intStoreID) = CStr(oRS(0)) Then
Response.Write "<option value=""" & oRS(0) & """ selected>" & oRS(1) & "</option>" & vbcrlf
Else
Response.Write "<option value=""" & oRS(0) & """>" & oRS(1) & "</option>" & vbcrlf
End If
oRS.MoveNext
Loop
Response.Write "</select>" & vbcrlf
Set oRS = Nothing
oConn.Close
Set oConn = Nothing
%>
<div id="otherSelects"></div>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" value="Submit" name="cmdSubmit" />
</td>
</tr>
</table>
</form>
</body>
</html>
temp2.asp:
<% @Language = VBScript %>
<script type="text/javascript" src="/includes/js/AjaxRequ
<%
intID = Request.QueryString("id")
strSQL = "SELECT M1.gcID, M1.gCat, M1.parentID FROM ModLinksCats M1 INNER JOIN ModLinksCats M2 ON M1.gcID = M2.gcID WHERE M1.parentID = " & intID
If intID <> "" Then
connStr = "Provider=Microsoft.Jet.OL
Set oConn = Server.CreateObject("ADODB
oConn.Open(inrsConn)
Set oRS = oConn.Execute(strSQL)
If Not(oRS.EOF) Then
Response.Write "<select name=""select" & intID & """ onChange=""buildChildSelec
Response.Write "<option value="""">Select One</option>" & vbcrlf
End If
Do While Not oRS.EOF
If CStr(intStoreID) = CStr(oRS(0)) Then
Response.Write "<option value=""" & oRS(0) & """ selected>" & oRS(1) & "</option>" & vbcrlf
Else
Response.Write "<option value=""" & oRS(0) & """>" & oRS(1) & "</option>" & vbcrlf
End If
oRS.MoveNext
Loop
If Not(oRS.EOF) Then
Response.Write "</select>" & vbcrlf
End If
Set oRS = Nothing
oConn.Close
Set oConn = Nothing
End If
%>
ASKER
sorry...in temp2.asp add in the <!--#include virtual="/includes/inc/db.
I have it working here: http://www.functionland.com/ee/kev/ajaxmultiselect.asp
You can download all of my code at: http://www.functionland.com/ee/kev/ajaxmultiselect.zip
That has the JavaScript, ASP, and database in it...
You can download all of my code at: http://www.functionland.com/ee/kev/ajaxmultiselect.zip
That has the JavaScript, ASP, and database in it...
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Sorry about the link.
Here is the one that works
www.cjpattoncenter.com/other/index.asp
You can download the code here
www.cjpattoncenter.com/other/dropdown.zip
Here is the one that works
www.cjpattoncenter.com/other/index.asp
You can download the code here
www.cjpattoncenter.com/other/dropdown.zip
ASKER
@aianrnoens seems to work pretty good, I will try it out in a few.
Only thing is, will I be able to do this with 1 table as the category table. I do it like that to do a breadcrumb nav. You can see it at http://www.portalfanatic.com/links/ or http://www.portalfanatic.com/gallery/
Only thing is, will I be able to do this with 1 table as the category table. I do it like that to do a breadcrumb nav. You can see it at http://www.portalfanatic.com/links/ or http://www.portalfanatic.com/gallery/
aianrnoens works but it only will do two predefined dropdowns... You need to be able to handle an unlimited amount of dropdowns/categories.
I think the only thing that needs to be changed in mine is the JavaScript, so that it will replace all the child dropdowns below the one that is being selected...
I think the only thing that needs to be changed in mine is the JavaScript, so that it will replace all the child dropdowns below the one that is being selected...
ASKER
i know very little about javascript
yeah, me too... but I am hoping to figure this out...
I will work on it in my spare time today and let you know if I figure it out...
I will work on it in my spare time today and let you know if I figure it out...
I will work out a solution to use unlimited levels. Give me some time. I unfortunatly dont have much time to be on the computer.
ASKER
ok
The problem is illuding me.
I cannot seem to get it to work for more then one or two levels with my method. Kep75 works great. Just need to remove the child things if changed, not sure how.
Anyway I will keep working on it. If I come up with a solution I will post it.
I cannot seem to get it to work for more then one or two levels with my method. Kep75 works great. Just need to remove the child things if changed, not sure how.
Anyway I will keep working on it. If I come up with a solution I will post it.
My brain is hurting from thinking about this question...
I have the following thoughts now:
1. Use one of the classic solutions available such as: http://home.att.net/~codelibrary/HTML/dropdown_p.htm or http://webdeveloper.earthweb.com/repository/javascripts/2002/07/91311/cascadeDrops_simple.html This would require a database query to determine which dropdowns to display initially and then you would dynamically create the JavaScript from the database.
2. Back to the treeview solution that was proposed by MsShadow... Technically, all the dropdowns are doing is "navigating", the more I think about it; the more I think something like this makes sense. Click on a link on the left side and it expands and displays the items you want to edit on the right. Until you got to the lowest level, you would simply be editing the directory names, but once you got to the lowest level, you would then be able to edit the links. From a usability standpoint, I would think this would be a far better solution.
I have the following thoughts now:
1. Use one of the classic solutions available such as: http://home.att.net/~codelibrary/HTML/dropdown_p.htm or http://webdeveloper.earthweb.com/repository/javascripts/2002/07/91311/cascadeDrops_simple.html This would require a database query to determine which dropdowns to display initially and then you would dynamically create the JavaScript from the database.
2. Back to the treeview solution that was proposed by MsShadow... Technically, all the dropdowns are doing is "navigating", the more I think about it; the more I think something like this makes sense. Click on a link on the left side and it expands and displays the items you want to edit on the right. Until you got to the lowest level, you would simply be editing the directory names, but once you got to the lowest level, you would then be able to edit the links. From a usability standpoint, I would think this would be a far better solution.
ASKER
(2) not a bad idea peter.
how would I go about getting the form to recognize that I've expanded the categories(directories), when I need to pass the gcID?
(1) good examples too, however they seem limited. How would it go about generating the next drop-down?
This link will give you an idea what I am attempting to accomplish
http://www.portalfanatic.com/gallery/?pCat=35
towards the top of the page you will see the Navigation. These are the categories, and they are all based on a parentID to the previous. What I'm trying to accomplish is making the edit page for the pics themselves. So I can move them around the categories. But, as you can see in the link above, the child-parent relationship...
how would I go about getting the form to recognize that I've expanded the categories(directories), when I need to pass the gcID?
(1) good examples too, however they seem limited. How would it go about generating the next drop-down?
This link will give you an idea what I am attempting to accomplish
http://www.portalfanatic.com/gallery/?pCat=35
towards the top of the page you will see the Navigation. These are the categories, and they are all based on a parentID to the previous. What I'm trying to accomplish is making the edit page for the pics themselves. So I can move them around the categories. But, as you can see in the link above, the child-parent relationship...
I always try to make the admin area very similar to the application itself. If I were building this, I would use the existing interface and check to see if the user is an admin on the page that actually displays the picture. If they are an admin, then you could display a category dropdown that would allow you to move the picture to a different category. It could also be displayed on the page that has the thumbnail as well. Then, editing the categories would be just as intuitive as the interface is now.
ASKER
taht's how it is now. But the drop-down for the category is populated with all the categories (parent & child)
What i'd like to do is have the first drop-down be just the top level, and the generated drop-downs be based on the previous drop-down
What i'd like to do is have the first drop-down be just the top level, and the generated drop-downs be based on the previous drop-down
ASKER
i'm wondering if I should say f-it, and go with tree-view method.
the edit page pops up to another window, from there the 1st field would be category. Have a text field named category, with a link next to it to select the category from another popup. I can make it drill down through the categories easy enough, but how would I make it so once a category is selected as the intended category update, update the text field in the edit page?
the edit page pops up to another window, from there the 1st field would be category. Have a text field named category, with a link next to it to select the category from another popup. I can make it drill down through the categories easy enough, but how would I make it so once a category is selected as the intended category update, update the text field in the edit page?
ASKER
bueller, bueller, ...... bueller?
ASKER
may I ask you all to participate in a different question. It is similar to this question, without the multiple drop-downs.
i've conned my client out of going with the multi-drop down solution, but now I am having a problem getting the new solutions correct........
please see the question in this link:
https://www.experts-exchange.com/questions/21885888/Dynamic-Drop-Down-Part-Duh.html
i've conned my client out of going with the multi-drop down solution, but now I am having a problem getting the new solutions correct........
please see the question in this link:
https://www.experts-exchange.com/questions/21885888/Dynamic-Drop-Down-Part-Duh.html
YOu would start with a dropdown that says: TOP and then there would be a second dropdown listing all the items that have parentid of 0 (matching top) and then based on what is selected next would determine which items are displayed in the next dropdown and right on down the line. Is there a particular number of levels deep that you would want to go, or could it be unlimited?