how to build an ASP dropdown

gilgalbiblewhee · #1 (**permalink**) 12-23-04, 01:00

I want to make a dropdown using a column from my table in the list of the dropdown.

What's wrong with this?

Code:

<form>
<select size="1" name="D1">
  <option VALUE="0" SELECTED>chapter</option><br>

<%Do while not RS.eof
ResponseWrite "<option VALUE="" & chapter & "">chapter</option><br>"

rs.movenext
loop
      ' Exit the loop when reaching the end of the recordset
'If rs.EOF Then Exit For end if
'next
'end if%>
</select></form>

Thrasymachus · #2 (**permalink**) 12-23-04, 08:08

Well, you might want to remove <BR> from this line because it is not needed:

<code>option VALUE="" & chapter & "">chapter</option><br></code>

And I am assuming this is only a snippet and you are defining and opening your recordset object before this snippet.

gilgalbiblewhee · #3 (**permalink**) 12-23-04, 13:27

I need your advice at first. I have the bible in a table database format. I have the "book_title" column which has 66 names of books, the "chapter" column, the "verse" column and the "text_data" column for the text.

What I was looking for is to build three dropdowns: 1 for the list of books, 1 for the list of chapters of a selected book and then 1 for the list of verses of the selected book and chapter. I was wondering if that can be done on one page or do I have to open an iframe to bring out the chapters of the selected book and then for the verse dropdown list?

vextout · #4 (**permalink**) 12-23-04, 13:41

you can also do a reload of the page. onclick even call the same page and when it runs through the code - check for either request.form or request.querystring to check what the value of the previous dropdown box was

Thrasymachus · #5 (**permalink**) 12-23-04, 15:06

yeah. reload the page and have the resulting page display the next dropdown based on the selection of the first dropdown.

gilgalbiblewhee · #6 (**permalink**) 12-24-04, 01:08

does DHTML work with ASP?

vextout · #7 (**permalink**) 12-25-04, 00:53

yes, but you might not need it, but it is possible

gilgalbiblewhee · #8 (**permalink**) 12-26-04, 16:48

I found this which is a triple-linked list box. But by looking at the query statement it has many tables. All I need is for one table. I have one field for books, one for chapters, one for verses and one for text. How do I change it?

Bullschmidt · #9 (**permalink**) 12-29-04, 18:40

Perhaps this may hopefully give you some ideas. It's got a downloadable sample and does retain values after the post back:

Classic ASP Design Tips - Dependent Listboxes
http://www.bullschmidt.com/devtip-de...tlistboxes.asp

gilgalbiblewhee · #10 (**permalink**) 12-30-04, 21:43

Bullshmidt I was looking for a listbox combo. I found one by Google. But why is this returning blank page?

Code:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<%
' FileName="default_oledb.htm"
' Type="ADO" 
' DesigntimeType="ADO"
' HTTP="false"
' Catalog=""
' Schema=""

Dim MM_connPlayGround_STRING
Dim strSource : strSource = Server.MapPath("kjv.mdb")

MM_connPlayGround_STRING = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & strSource & ";"

%>

<%
Dim rsMain
Dim rsMain_numRows

Set rsMain = Server.CreateObject("ADODB.Recordset")
rsMain.ActiveConnection = MM_connPlayGround_STRING
rsMain.Source = "SELECT *  FROM bible  ORDER BY book"
rsMain.CursorType = 0
rsMain.CursorLocation = 2
rsMain.LockType = 1
rsMain.Open()

rsMain_numRows = 0
%>
<%
Dim rsSub
Dim rsSub_numRows

Set rsSub = Server.CreateObject("ADODB.Recordset")
rsSub.ActiveConnection = MM_connPlayGround_STRING
rsSub.Source = "SELECT *  FROM bible  ORDER BY chapter"
rsSub.CursorType = 0
rsSub.CursorLocation = 2
rsSub.LockType = 1
rsSub.Open()

rsSub_numRows = 0
%>

<html>
<head>
<title>Client Side Dependent List Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #FBFAF7;
margin: 5px;
}

body, td, p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
color: #2F2F2F;
}

a:link {
color: #00497D;
text-decoration: underline;
}

a:visited {
color: #00497D;
text-decoration: underline;
}

a:hover {
color: #607E54;
text-decoration: none;
}

a:active {
color: #FFFFFF;
}

h1, h2, h3, h4, h5, h6, th {
font-family: Arial, Helvetica, sans-serif;
}

h1 {
font-size: 1.75em;
color: #607E54;
}

h2 {
font-size: 1.5em;
color: #00497D;

}

h3 {
font-size: 1.25em;
color: #607E54;
}

h4 {
font-size: 1.25em;
color: #00497D;
margin-bottom: 0px;
}

h5 {
font-size: 1.25em;
color: #607E54;
}


th {
font-size: 12px;
color: #607E54;
margin: 0px;
font-weight: bold;
}

select.select-type1 {
background-color: #E9E7D4;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 10px;
}

-->
</style>

<!-- Dynamic Dependent List box Code for *** VBScript *** Server Model //-->
<script language="JavaScript">
<!--

var arrDynaList = new Array();
var arrDL1 = new Array();

arrDL1[1] = "select1";		// Name of parent list box
arrDL1[2] = "form1";		// Name of form containing parent list box
arrDL1[3] = "select2";		// Name of child list box
arrDL1[4] = "form1";		// Name of form containing child list box
arrDL1[5] = arrDynaList;	// No need to do anything here
  
<%
Dim txtDynaListRelation, txtDynaListLabel, txtDynaListValue, oDynaListRS

txtDynaListRelation = "SubCat_MainCatID" 	' Name of recordset field relating to parent
txtDynaListLabel = "SubCat_Name" 			' Name of recordset field for child Item Label
txtDynaListValue = "SubCategoryID" 			' Name of recordset field for child Value
Set oDynaListRS = rsSub						' Name of child list box recordset
  
Dim varDynaList
varDynaList = -1

Dim varMaxWidth
varMaxWidth = "1"

Dim varCheckGroup
varCheckGroup = oDynaListRS.Fields.Item(txtDynaListRelation).Value

Dim varCheckLength
varCheckLength = 0

Dim varMaxLength
varMaxLength = 0

While (NOT oDynaListRS.EOF)

 If (varCheckGroup <> oDynaListRS.Fields.Item(txtDynaListRelation).Value) Then
  If (varCheckLength > varMaxLength) Then
   varMaxLength = varCheckLength
  End If
  varCheckLength = 0
 End If
%>
 arrDynaList[<%=(varDynaList+1)%>] = "<%=(oDynaListRS.Fields.Item(txtDynaListRelation).Value)%>"
 arrDynaList[<%=(varDynaList+2)%>] = "<%=(oDynaListRS.Fields.Item(txtDynaListLabel).Value)%>"
 arrDynaList[<%=(varDynaList+3)%>] = "<%=(oDynaListRS.Fields.Item(txtDynaListValue).Value)%>"
<%
 If (len(oDynaListRS.Fields.Item(txtDynaListLabel).Value) > len(varMaxWidth)) Then
  varMaxWidth = oDynaListRS.Fields.Item(txtDynaListLabel).Value
 End If
 varCheckLength = varCheckLength + 1
 varDynaList = varDynaList + 3
 oDynaListRS.MoveNext()
Wend

If (varCheckLength > varMaxLength) Then
 varMaxLength = varCheckLength
End If
%>

//-->
</script>

<!-- End of object/array definitions, beginning of generic functions -->

<script language="JavaScript">
<!--
function setDynaList(arrDL){

 var oList1 = document.forms[arrDL[2]].elements[arrDL[1]];
 var oList2 = document.forms[arrDL[4]].elements[arrDL[3]];
 var arrList = arrDL[5];
 
 clearDynaList(oList2);
 
 if (oList1.selectedIndex == -1){
  oList1.selectedIndex = 0;
 }

 populateDynaList(oList2, oList1[oList1.selectedIndex].value, arrList);
 return true;
}
 
function clearDynaList(oList){

 for (var i = oList.options.length; i >= 0; i--){
  oList.options[i] = null;
 }
 
 oList.selectedIndex = -1;
}
 
/*This is a modified function from the original MM script. Mick White 
added the first line of oList so there would be an initial selection.
Needed this if there is only 1 child menu item, otherwise, the single
child menu item would be already hihghlighted and you can not select 
it. Also good for validation purposes so you can set the .js 
validation to not allow the first selection.
*/

function populateDynaList(oList, nIndex, aArray){
oList[oList.length]= new Option("Please Select");
 for (var i = 0; i < aArray.length; i= i + 3){
  if (aArray[i] == nIndex){
   oList.options[oList.options.length] = new Option(aArray[i + 1], aArray[i + 2]);
  }
  //oList.size=oList.length //You need to comment out this line of the function if you use this mod
 }

//A quick mod here, I changed the ==0 to ==1 so that the length 
//takes into account the Please select option from above.
 if (oList.options.length == 1){
  oList.options[oList.options.length] = new Option(":: No SubCategories Available ::");
 }
 oList.selectedIndex = 0; 
}

//-->
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000" onLoad="setDynaList(arrDL1)">

<p>&nbsp;</p>
<form name="form1" method="post" action="">
    <table width="650" border="0" cellspacing="0" cellpadding="5" align="center">
		<tr> 
			<th valign="bottom" width="50%">Parent List Menu</th>
			<th width="50%">Child List Menu</th>
		</tr>
		<tr> 
			<td valign="top" width="50%">Making any selection here repopulates 
				the Child List Box on the right.</td>
			<td width="50%" valign="top"> <p>This set will say and highlight &quot;<span class="attention">Please
							Select</span>&quot; whenever it is re-populated from the Parent 
					List Box. It will now maintain it's original height of 10
								lines and will not grow/shrink vertically based
							on content.</p>
				<p>I <span class="row-selected">commented out</span> the last 
					line in the function to make this work.</p></td>
		</tr>
		<tr> 
			<td align="center"> <select name="select1" size="10" onChange="setDynaList(arrDL1)" class="select-type1">
					<%
While (NOT rsMain.EOF)
%>
					<option value="<%=(rsMain.Fields.Item("MainCategoryID").Value)%>"><%=(rsMain.Fields.Item("MainCat_Name").Value)%></option>
					<%
  rsMain.MoveNext()
Wend
If (rsMain.CursorType > 0) Then
  rsMain.MoveFirst
Else
  rsMain.Requery
End If
%>
				</select> </td>
			<td align="center"> <select name="select2" size="10" class="select-type1">
				</select> </td>
		</tr>
		<tr> 
			<td colspan="2"> <p>&nbsp;</p>
				<p>This is a slightly modifed version of the <a href="http://www.macromedia.com/support/ultradev/ts/documents/client_dynamic_listbox.htm">technote
						from Macromedia</a>.</p>
				<p>All of the asp/vbscript is the same; we modified the function 
					described below to maintain the child list box's height and 
					the initially selected item to say &quot;please select&quot; 
					which helps in form validation so that the use must choose 
					something other than the first item.</p>
				<p>&nbsp;</p>
			 <h4>Here is the function to modify to:</h4>
				<ol>
					<li> maintain the height of 10</li>
				    <li> initially selected item to say &quot;please select&quot;</li>
				</ol>
<pre><font size="2">function populateDynaList(oList, nIndex, aArray){
oList[oList.length]= new Option("Please Select");
 for (var i = 0; i < aArray.length; i= i + 3){
  if (aArray[i] == nIndex){
   oList.options[oList.options.length] = new Option(aArray[i + 1], aArray[i + 2]);
  }
  //oList.size=oList.length //You need to comment out this line of the function if you use this mod
 }

//A quick mod here, I changed the ==0 to ==1 so that the length takes into account the Please select option
//from above.
 if (oList.options.length == 1){
  oList.options[oList.options.length] = new Option(":: No SubCategories Available ::");
 }
 oList.selectedIndex = 0; 
}

</font></pre></td>
	 </tr>
	</table>
</form>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>
<%
rsMain.Close()
Set rsMain = Nothing
%>
<%
rsSub.Close()
Set rsSub = Nothing
%>