Dynamic linked dropdown box

https://www.experts-exchange.com/questions/20948974/Need-help-w-dynamic-dependent-dropdown-boxes.html?query=dropdown+post+back&searchType=topic

https://www.experts-exchange.com/questions/20922758/Dynamic-drop-down-and-page-refresh.html?query=dropdown+dynamic&searchType=topic

HI alorentz,

I forgot to mention all the data are stored on the ASP form instead of DB.
Thanks.

mrong

https://www.experts-exchange.com/questions/20953559/Combo-Boxes-working-together.html

YZlat,

The sample you provide is pullind data from database. how about modify data on the form?
Thanks.

Say I have the following two dropdown boxes:

drop1:
fish
mouse

drop2:
goldfish(fish)
oscar(fish)

micky mouse (mouse)
mini mouse(mouse)

What will be the code for this sample?
Thanks.

Have you tried my example - it does exactly what you have just described - please try it :)

You only need to copy and paste it - it works 'as is' no database or anything needed - go on - give it a try :)

Hi Lord_McFly,

Let me try it.
Thanks.

Lord_McFly,

Your sample code works. But how should I modified my drodown lists. Here is my 2 dropdown. Could you please modified them? I have put rest of your script code on my asp page. Thanks!

 <TD width="193" height="31"><font face="Arial" color="#000080">Campus
      Name:</font></TD>
      <TD width="393" height="31">
      <select size="1" name="Campus" onfocus="nextfield ='BldgName'">
                <option selected>Please choose one</option>
              </select></TD>
    </TR>
   
    <tr>
      <TD width="193" height="28"><font color="#000080" face="Arial">Building
      Name:</font></TD>
      <TD width="393" height="28">
      <select size="1" name="BldgName" onfocus="nextfield ='pickupdate'">
                <option selected>Please choose one</option>
              </select></TD>
    </tr>

Ok where are the values for the dropdowns going to come from?

Are they coming from a database or are you going to hardcode them?

I am gonna hardcode them.
campus is dropdown1. value in BldgName(dropdown2) will be associated with dropdown1.
Thanks.

Ok, you see where I have this....

Dim sList(5)

sList(0) = "1|Colours|1|Blue"
sList(1) = "1|Colours|2|Red"
sList(2) = "1|Colours|3|Green"
sList(3) = "2|Shapes|4|Square"
sList(4) = "2|Shapes|5|Circle"
sList(5) = "2|Shapes|6|Rectangle"

Hope fully you can see what I'm doing here.

Now using you example from above...

Dim sList(3)

sList(0) = "1|Fish|1|Goldfish"
sList(1) = "1|Fish|2|Oscar"
sList(2) = "2|Mouse|1|Micky Mouse"
sList(3) = "2|Mouse|2|Mini Mouse"

Hopefully you get what you've got to do - yes?

yes, I got this part.

Then you just need to put you data into the array then like in the example and you're ready to rock and roll.

But how to put the array into the following two drop down lists?

 <TD width="193" height="31"><font face="Arial" color="#000080">Campus
      Name:</font></TD>
      <TD width="393" height="31">
      <select size="1" name="Pet" >
                <option selected>Please choose one</option>
              </select></TD>
    </TR>
   
    <tr>
      <TD width="193" height="28"><font color="#000080" face="Arial">Building
      Name:</font></TD>
      <TD width="393" height="28">
      <select size="1" name="PetName">
                <option selected>Please choose one</option>
              </select></TD>
    </tr>

You don't need to = just put the info like so...

sList(0) = "1|Fish|1|Goldfish"
sList(1) = "1|Fish|2|Oscar"
sList(2) = "2|Mouse|1|Micky Mouse"
sList(3) = "2|Mouse|2|Mini Mouse"

The Javascript takes care of the rest.

Sorry - I didn't notice you have changed the names of the listboxes - this is you code amended to work with the rest of the code.

<TD width="193" height="31"><font face="Arial" color="#000080">Campus
      Name:</font></TD>
      <TD width="393" height="31">
      <select size="1" name="f_0" onChange="UpdateList(this,<%=UBound(sList)%>)">
                <option selected>Please choose one</option>
              </select></TD>
    </TR>
   
    <tr>
      <TD width="193" height="28"><font color="#000080" face="Arial">Building
      Name:</font></TD>
      <TD width="393" height="28">
      <select size="1" name="f_1">
                <option selected>Please choose one</option>
              </select></TD>
    </tr>

As one final check paste the whole page so I can have a quick look - but if it works then not to worry.

No data in the two drop down lists after the change.
Here is my ASP. BTW, I only copied part of my javascript in order to save some pace.:

<html>

<head>

<TITLE>Classroom Needs... - Facilities Maintenance Services</TITLE>
</HEAD>

<%@ Language=VBScript %>
<%

Dim sList(5)

sList(0) = "1|Colours|1|Blue"
sList(1) = "1|Colours|2|Red"
sList(2) = "1|Colours|3|Green"
sList(3) = "2|Shapes|4|Square"
sList(4) = "2|Shapes|5|Circle"
sList(5) = "2|Shapes|6|Rectangle"

%>

<SCRIPT LANGUAGE="JavaScript">
function PopBox(NoItems)
     {
          var i
          var ii
          var check
          var count
         
          document.ListBox.f_0.length = 0;
          document.ListBox.f_0.options[0] = new Option();
          document.ListBox.f_0.options[0].value = "";
          document.ListBox.f_0.options[0].text = "Please select.";
          count = 0
         
          //Run through the items in the array...
          for(i=0; i<= NoItems; i++)
               {
                    check = false;
                   
                    //If we have items in the list box...
                    if(document.ListBox.f_0.length!=0)
                         {
                              //Split an array item...
                              var items = list[i].split("|");
                             
                              //Check we haven't added the item before...
                              for(ii=0; ii<=document.ListBox.f_0.length - 1; ii++)
                                   {
                                        if(document.ListBox.f_0.options[ii].value==items[0])
                                             {
                                                  //Means item was already in list...
                                                  check = true
                                             }
                                   }
                         }
                   
                    if(check==false)
                         {
                              //Increment a counter an add item...
                              count++;
                             
                              var items = list[i].split("|");
                             
                              document.ListBox.f_0.options[count] = new Option();
                              document.ListBox.f_0.options[count].value = items[0];
                              document.ListBox.f_0.options[count].text = items[1];
                         }
               }
     }

function UpdateList(Object,NoItems)
     {
          var i
          var index
          var count
          var check
         
          //Empty list box...
          document.ListBox.f_1.length = 0;
         
          //Get the ID (or what ever) from the first list box...
          index = Object.options[Object.selectedIndex].value;
          count = -1
         
          //Loop through the array to see what items match our ID...
          for(i=0; i<=NoItems; i++)
               {
                    var items = list[i].split("|");
                   
                    //Compare - if it matches add it to the listbox...
                    if(index==items[0])
                         {
                              count++;
                             
                              document.ListBox.f_1.options[count] = new Option();
                              document.ListBox.f_1.options[count].value = items[2];
                              document.ListBox.f_1.options[count].text = items[3];
                         }
               }
     }


function VerifyData()
  {
   
    if (!checkFullName(document.frmUser.name))
   {
    return false;
    }      
     if (!checkUSPhone(document.frmUser.PhoneNum))
    {
     return false;
    }
    if (!checkPhoneExt(document.frmUser.PhoneExt,true))
    {
    return false;
    }    
    if (!checkEmail(document.frmUser.email))
    {
     return false;
    }
   
   else
      return true;
  }</SCRIPT>



<body body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" background="../../images/bg.gif" bgcolor="#FFFFFF">

<p><map name="FPMap0">
<area href="../../LocationDirection/LocationDirection.html" coords="14, 79, 128, 119" shape="rect">
<area href="../../SiteMap/SiteMap.html" coords="227, 72, 307, 94" shape="rect">
<area href="../../OrgChart/OrgChart.html" coords="324, 73, 468, 93" shape="rect">
<area href="../../StaffDir/StaffDirectory.html" coords="488, 72, 591, 92" shape="rect">
<area href="http://facilities.rutgers.edu" shape="rect" coords="34, 7, 162, 63">
<area href="http://www.rutgers.edu" shape="rect" coords="466, 13, 600, 59"></map>
<img border="0" src="../images/header.gif" alt="RUTGERS Facilities Maintenace Services Home Page" usemap="#FPMap0"></p>
<div align="left">
 
<div align="left">
  <table border="0" width="635" align="left" cellspacing="0" cellpadding="0" height="880">
<tr>






    <td width="163" valign="top" height="880">
   





    <td width="938" valign="top" height="880">
   
   
    <FORM ACTION="SendVanRentalReq.asp" NAME="frmUser" METHOD="POST"
              onSubmit="return VerifyData()">
               <TABLE BORDER=0 width="588" height="1">
    <TR>
      <TD width="586" height="31" colspan="2">
      <font face="Arial" size="6" color="#BD0000">My Classroom Needs...</font></TD>
    </TR>
   
    <TR>
      <TD width="586" height="31" colspan="2">
              <img border="0" src="../imagenew/yellow-line-440.gif" width="500" height="3"></TD>
    </TR>
   
    <TR>
      <TD width="193" height="31"><u><b><font face="Arial" color="#BD0000">
      Problem Description</font></b></u></TD>
      <TD width="393" height="31">&nbsp;</TD>
    </TR>
   
    <TR>
      <TD width="193" height="31"><font face="Arial" color="#000080">Campus
      Name:</font></TD>
      <TD width="393" height="31">
           <select size="1" name="f_0" onChange="UpdateList(this,<%=UBound(sList)%>)">          
              </select></TD>
    </TR>
   
    <tr>
      <TD width="193" height="28"><font color="#000080" face="Arial">Building
      Name:</font></TD>
      <TD width="393" height="28">
      <select size="1" name="f_1" onfocus="nextfield ='pickupdate'">
               
              </select></TD>
    </tr>
   
    <tr>
      <TD width="193" height="28"><font color="#000080" face="Arial">Building
      Number:</font></TD>
      <TD width="393" height="28">
      <INPUT NAME="BldgNum" onfocus="nextfield ='Fax'" onchange=checkPhoneExt(this)
           SIZE="30"></TD>
    </tr>
   
    <tr>
      <TD width="193" height="28"><font color="#000080" face="Arial">Room
      Number:</font></TD>
      <TD width="393" height="28">
      <INPUT NAME="RoomNum" onfocus="nextfield ='department'" onchange=checkUSPhone(this)
           SIZE="30"></TD>
    </tr>
 <INPUT NAME="email" onfocus="nextfield ='done'" SIZE="30" maxlength="30"></TD>
    </tr>
   
    <TR>
      <TD width="193" height="30">&nbsp;</TD>
      <TD width="393" height="30">&nbsp;</TD>
    </TR>
   
    <TR>
      <TD ALIGN=CENTER width="546" height="21" colspan="2">
      <p align="left">
              <img border="0" src="../imagenew/yellow-line-440.gif" width="500" height="3"></TD>
    </TR>
    <TR>
      <TD ALIGN=CENTER width="150" height="21">
      &nbsp;</TD>
      <TD ALIGN=CENTER width="396" height="21">
      &nbsp;</TD>
    </TR>
    <TR>
      <TD ALIGN=CENTER width="150" height="21">
      <input type="submit" value="Submit" name="B1">
      </TD>
      <TD ALIGN=CENTER width="396" height="21">
      <p align="left">
      <input type="reset" value="Reset" name="B2">
      </TD>
    </TR>
  </TABLE>

</FORM>


  <br>
 
  </table>
</BODY>

One thing - the <form> name - you have 'frmUser', you have a choice either change that to 'ListBox' or change all the references in the Javascript to 'frmUser' :)

Apart from that it looks fine - you just need to put something in the array - it won't populate the list boxes until to you that, you know - change thes values...

Dim sList(5)

sList(0) = "1|Colours|1|Blue"
sList(1) = "1|Colours|2|Red"
sList(2) = "1|Colours|3|Green"
sList(3) = "2|Shapes|4|Square"
sList(4) = "2|Shapes|5|Circle"
sList(5) = "2|Shapes|6|Rectangle"

Do you understand what you need to do?

Still no data in the drop down lists.

<%@ Language=VBScript %>
<%

Dim sList(5)

sList(0) = "1|Colours|1|Blue"
sList(1) = "1|Colours|2|Red"
sList(2) = "1|Colours|3|Green"
sList(3) = "2|Shapes|4|Square"
sList(4) = "2|Shapes|5|Circle"
sList(5) = "2|Shapes|6|Rectangle"

%>

<SCRIPT LANGUAGE="JavaScript">


function PopBox(NoItems)
     {
          var i
          var ii
          var check
          var count
         
          document.frmUser.f_0.length = 0;
          document.frmUser.f_0.options[0] = new Option();
          document.frmUser.f_0.options[0].value = "";
          document.frmUser.f_0.options[0].text = "Please select.";
          count = 0
         
          //Run through the items in the array...
          for(i=0; i<= NoItems; i++)
               {
                    check = false;
                   
                    //If we have items in the list box...
                    if(document.frmUser.f_0.length!=0)
                         {
                              //Split an array item...
                              var items = list[i].split("|");
                             
                              //Check we haven't added the item before...
                              for(ii=0; ii<=document.frmUser.f_0.length - 1; ii++)
                                   {
                                        if(document.frmUser.f_0.options[ii].value==items[0])
                                             {
                                                  //Means item was already in list...
                                                  check = true
                                             }
                                   }
                         }
                   
                    if(check==false)
                         {
                              //Increment a counter an add item...
                              count++;
                             
                              var items = list[i].split("|");
                             
                              document.frmUser.f_0.options[count] = new Option();
                              document.frmUser.f_0.options[count].value = items[0];
                              document.frmUser.f_0.options[count].text = items[1];
                         }
               }
     }

function UpdateList(Object,NoItems)
     {
          var i
          var index
          var count
          var check
         
          //Empty list box...
          document.frmUser.f_1.length = 0;
         
          //Get the ID (or what ever) from the first list box...
          index = Object.options[Object.selectedIndex].value;
          count = -1
         
          //Loop through the array to see what items match our ID...
          for(i=0; i<=NoItems; i++)
               {
                    var items = list[i].split("|");
                   
                    //Compare - if it matches add it to the listbox...
                    if(index==items[0])
                         {
                              count++;
                             
                              document.frmUser.f_1.options[count] = new Option();
                              document.frmUser.f_1.options[count].value = items[2];
                              document.frmUser.f_1.options[count].text = items[3];
                         }
               }
     }

</SCRIPT>

I can see "Please select." in dropdown1. so it only populate the options[0].text.
Thanks.

Sorry - need to put...

onLoad="PopBox(<%=UBound(sList)%>)"

...in the <body> tage

Make sure the following is in the <head></head> tags....

<%'Dynamically Create Array Items...
Response.Write "<script language='JavaScript'>" & vbCRLF
Response.Write "<!--" & vbCRLF
Response.Write "      var list = new Array(" & UBound(sList) & ");" & vbCRLF & vbCRLF
For iLp = 0 to UBound(sList)
Response.Write "      list[" & iLp & "] = '" & sList(iLp) & "';" & vbCRLF
Next
Response.Write "//-->" & vbCRLF
Response.Write "</script>" & vbCRLF
%>

Once thats done - paste the page in again if there are still problems - we're close :)

Lord_McFly,

I have to go to the meeting now. I will let you know how it works out after I come back.. Thanks a lot!