Dynamic List Boxes - function problem

virtualranger · Sep 26, 2006

Looked thru the FAQ's and found some useful tips on Dynamic list boxes. Unfortunately my code isn't working. Must be something simple. I know the recordset contents are correct. There is no error when I load the page, the first list box populates correctly but it won't populate the second. Possibly a problem with calling the changeOptions function?

Can anyone point out where I've gone wrong?

Code:

<% @ LANGUAGE = VBScript%>
<%
Option Explicit

Stuff here to create connections...

Dim str_sql

str_sql = "SELECT devCountry, devCounty " & _
		"FROM Results " & _
		"ORDER BY devCountry, devCounty"

Set rsCountry = objConn.Execute(str_sql)


%>
<html>
<head>
<script language="javascript">
var dataArray = new Array(<%
   If Not rsCountry.EOF Then rsCountry.MoveFirst
   Dim last_item
   Do Until rsCountry.EOF

      'check if the first column item is equal to its value  
      '   from the previous loop, if not start a new array
      If last_item <> rsCountry("devCountry") Then
         'if there was a last item, finish the previous array
         If len(last_item) > 0 Then Response.Write ")"
         'start a new array
         Response.Write ",new Array("
         'record last item
         last_item = rsCountry("devCountry")
      End If

      'output the second column value preceded by a comma
      Response.Write "," & rsCountry("devCounty")
      
      'queue to next record
      rsCountry.MoveNext
   Loop

   'finish open array if there was a last item
   If len(last_item) > 0 Then Response.Write ")"
   %>);

function changeOptions(elemOne,elemTwo){
   var i;

   //clear out previous options leaving the top generic text
   for(i = elemTwo.options.length; i >= 1; i--)
      elemTwo.options[i] = null;
   elemTwo.selectedIndex = 0;

   //if the selected index in the first one is 0 escape out
   if(elemOne.selectedIndex == 0)
      return false;

   //populate second one
   for(i=1;i<dataArray.length;i++){
      elemTwo.options[i] = new Option(dataArray[elemOne.selectedIndex][i],elemOne.selectedIndex][i]);
   }
}
</script>
</head>
<body>

<form method="POST" action="whatever.asp">
  <select name="selType"
  onchange="changeOptions(this,document.getElementsByName('selCounty'))">
    <option value>[ Select Country ]</option>
    <%
    'the only way the RS could be BOF at this point is if it was empty
    If Not rsCountry.BOF Then rsCountry.MoveFirst
	Dim last_Country
    Do Until rsCountry.EOF
		If rsCountry("devCountry") <> last_Country Then
	        Response.Write "<option>" & rsCountry("devCountry") & "</option>"
			last_Country = rsCountry("devCountry")
		End If
        rsCountry.MoveNext
    Loop
    %>
  </select> <select name="selCounty">
    <option value>[ Select County ]</option>
  </select> <input type="submit" value="Search">
</form>
<%
rsCountry.Close
objConn.Close
Set rsCountry=Nothing
Set objConn=Nothing
%>
</body>
</html>

Thanks,
Jamie

Sheco · Sep 26, 2006

Jamie,

When I hit a snag debugging client-side JavaScript that is partially generated by ASP I like to take ASP out of the equation by using "View Source" and saving it as a plain .HTM file. The after I only re-introduce the server-side logic after the browser-side stuff is behaving.

Tarwn · Sep 28, 2006

One of these items doesn't look like the other:

Code:

elemTwo.options[i] = new Option(dataArray[elemOne.selectedIndex][i],[highlight]elemOne.selectedIndex][i][/highlight]);

Not sure if this would give you a javascript error or if it would be capable of ignoring it, but you missed the array name before the highlighted portion.

Also, I agree with Sheco. You should do a view source to make sure your actually getting data populated into your array from your recordset. I will sometimes even copy the source out to a seperate file and save it and work on debugging just the HTML then take those changes back to the ASP file.

-T

virtualranger · Sep 28, 2006

You were right, the array was populated but wasn't formed correctly. I needed to change the formation of the array to this:

Code:

Do Until rsCountry.EOF
      'check if the first column item is equal to it's value  
      '   from the previous loop, if not start a new array
      If last_item <> rsCountry("devCountry") Then
         'if there was a last item, finish the previous array
         If len(last_item) > 0 Then Response.Write "),"
         'start a new array
         Response.Write "new Array(null"
         'record last item
         last_item = rsCountry("devCountry")
      End If

      'output the second column value preceded by a comma
      Response.Write ",'" & rsCountry("devCounty") & "'" 
      'queue to next record
      rsCountry.MoveNext
   Loop

   'finish open array if there was a last item
   If len(last_item) > 0 Then Response.Write ")"

Once I got the array formed correctly the original code below popluated the 2nd list box ok:

Code:

//populate second one
   for(i=1;i<dataArray.length;i++){
      elemTwo.options[i] = new Option(dataArray[elemOne.selectedIndex][i],elemOne.selectedIndex][i]);
   }

but, it was limiting the length of the second list box by the length of the outter array, not the inner array. So I had to ammend it to this:

Code:

//populate second one
   var j = elemOne.selectedIndex;
   var InnerArrayLength = dataArray[j].length;
   for(i=1;i<InnerArrayLength;i++){
      elemTwo.options[i] = new Option(dataArray[elemOne.selectedIndex][i],dataArray[elemOne.selectedIndex][i]);
	}

Thanks for the help.

Thanks,
Jamie

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!

Dynamic List Boxes - function problem

virtualranger

Technical User

Sheco

Programmer

Tarwn

Programmer

virtualranger

Technical User

Similar threads

Part and Inventory Search

Sponsor