By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
457,761 Members | 1,193 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 457,761 IT Pros & Developers. It's quick & easy.

Populate Child Dropdown without Page Refresh / Page Return From Database

P: 76
I've argued with this for quite some time and I've seen a number of other people on various other sites asking for this same thing with no answer so I figured that now that I have solved it I would share it. It could probably use some tweaking but anyway feel free to use this code as you see fit.

The idea is that you have a dropdown, and dependent on what they pick on the first dropdown will determine what they get in the second one. Now the kicker I had is that both are populated by the database as well.. so here's what I've got.

The following assumptions are made.
The two tables are related in some fashion, they have an ID that can be associated with one another. For the sake of this example I'm calling it "MyID"

Also Running on the assumption that you already have a connection string and Conn is your connection.

Only tested to work in IE. If you're using Firefox you need to add a try/catch on the add element and add a different method of adding the element to the container.

Code goes before the BODY tag
Expand|Select|Wrap|Line Numbers
  1. <%Dim sql,rsFirst,rsSecond,x
  2. Set rsFirst = Server.Createobject("ADODB.recordset")
  3. sql = "SELECT * FROM FirstTable"
  4. rsFirst.Open sql,Conn
  5.  
  6. Set rsSecond = Server.Createobject("ADODB.recordset")
  7. sql = "SELECT * FROM SecondTable"
  8. rsSecond.Open sql,Conn
  9.  
  10. 'Write to page a script to declare a javascript array to hold your data.
  11. x=0
  12. %>
  13. <%="<script language=javascript>" & vbCrLf%>
  14. <%="var myArray = new Array()" & vbCrLf%>
  15. <%do until rsSecond.eof%>
  16. <%="myArray[" + x + "] = '" + rsSecond("MyID") + ";" + rsSecond("LabelField") + ";" + rsSecond("LastField") + "';"%>
  17. <%x=x+1%>
  18. <%rsSecond.movenext%>
  19. <%loop%>
  20. <%="</script>"%>
  21.  
  22. <script language="javascript">
  23.  function setField(setField,setID)
  24. {
  25.   var container = document.getElementById(setField);
  26.   container.length = 0;
  27.   var tempLine;
  28.  
  29.   for (var x=0;x<myArray.length;x++)
  30.   {
  31.     tempLine = myArray[x].split(";");
  32.     if (tempLine[0] == setID)
  33.     {
  34.       var newOpt document.createElement('option');
  35.       newOpt.text = tempLine[1];    //LabelField
  36.       newOpt.value = tempLine[0];   //MyID
  37.       container.add(newOpt);
  38.     }
  39.   }
  40. }
  41. </script>
  42.  
HTML Form
Expand|Select|Wrap|Line Numbers
  1. <label>Select First:</label>
  2. <select id="parentField" name="parentField" onChange="setField('childField',this.value)">
  3.   <%do until rsFirst.eof%>
  4.     <option value="<%=rsFirst("MyID")%>"><%=rsFirst("FirstLabel")%></option>
  5.   <%rsFirst.movenext%>
  6.   <%loop%>
  7. </select>
  8.  
  9. <label>Select Second:</label>
  10. <select id="childField" name="childField">
  11. </select>
  12.  
Oct 17 '06 #1
Share this Question
Share on Google+
2 Replies


P: 1
Try using AJAX for this.
Oct 24 '06 #2

P: 3
I am trying your code for "Populate Child Dropdown without Page Refresh / Page Return From Database"

I am hopeless at Javascript, and I have changed your script to the following and get an error...

Expand|Select|Wrap|Line Numbers
  1. <%
  2. Set rsFirst = Server.Createobject("ADODB.recordset") 
  3. sql = "SELECT categoryID, categoryActive, categoryTitle FROM category" 
  4. rsFirst.Open sql,adoCon 
  5.  
  6. Set rsSecond = Server.Createobject("ADODB.recordset") 
  7. sql = "SELECT categorySubID, categorySubActive, categorySubTitle, categorySubCategory FROM categorySub" 
  8. rsSecond.Open sql,adoCon 
  9.  
  10. x = 0
  11.  
  12. %>
Head
Expand|Select|Wrap|Line Numbers
  1. <script language=javascript> 
  2. var myArray = new Array() 
  3. <% do until rsSecond.eof %> 
  4. <%="myArray[" + x + "] = '" + rsSecond("categorySubID") + ";" + rsSecond("categorySubTitle") + ";" + rsSecond("categorySubCategory") + "';"%> 
  5. <% x=x+1 %> 
  6. <% rsSecond.movenext
  7. loop %> 
  8. </script>
  9. <script language="javascript"> 
  10.  function setField(setField,setID) 
  11.   var container = document.getElementById(setField); 
  12.   container.length = 0; 
  13.   var tempLine; 
  14.  
  15.   for (var x=0;x<myArray.length;x++) 
  16.   { 
  17.     tempLine = myArray[x].split(";"); 
  18.     if (tempLine[0] == setID) 
  19.     { 
  20.       var newOpt document.createElement('option'); 
  21.       newOpt.text = tempLine[1];    //LabelField 
  22.       newOpt.value = tempLine[0];   //MyID 
  23.       container.add(newOpt); 
  24.     } 
  25.   } 
  26. </script>
Body
Expand|Select|Wrap|Line Numbers
  1. <label>Select First:</label> 
  2. <select id="parentField" name="parentField" onChange="setField('childField',this.value)"> 
  3. <% do until rsFirst.eof %> 
  4. <option value="<%=rsFirst("categoryID")%>"><%=rsFirst("categoryTitle")%></option> 
  5. <% rsFirst.movenext
  6. loop %> 
  7. </select> 
  8. <label>Select Second:</label> 
  9. <select id="childField" name="childField"> 
  10. </select>
the error is on line 21
Expand|Select|Wrap|Line Numbers
  1. <%="myArray[" + x + "] = '" + rsSecond("categorySubID") + ";" + rsSecond("categorySubTitle") + ";" + rsSecond("categorySubCategory") + "';"%>
the error is
Expand|Select|Wrap|Line Numbers
  1. Type mismatch '[string: &quot;myarray[&quot;]
any help would be greatly appreciated. thanks in advance.
Aug 11 '09 #3

Post your reply

Sign in to post your reply or Sign up for a free account.