Dynamic linked dropdown box

Greetings,

I have two dropdown box:drop1(single choice) & drop2(multi-choices). Here is what I want to do:drop2 will show the data dynamic linked to the value has been picked up on drop1. Please provide sample code if possible.

Thanks in advance.

mrong
mrongAsked:
Who is Participating?
 
Lord_McFlyConnect With a Mentor Commented:
Although not is this example the onLoad="PopBox()" could be used to read the values that you have stored on the form. In the example array values are dynamically written out using ASP, this part could also be transfered into the PopBox() function.

================================================================================================
<%@ 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"

%>
<html>
<head>
<title>List Boxes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<%'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
%>

<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];
                              }
                  }
      }
//-->
</script>



</head>
<body onLoad="PopBox(<%=UBound(sList)%>)" bgcolor="#FFFFFF">
<form name="ListBox" method="post" action="Listbox.asp">
      <select name="f_0" onChange="UpdateList(this,<%=UBound(sList)%>)">
            <option value="">Please select first.</option>
      </select>

      <select name="f_1">
            <option value="">Select an item from first list.</option>
      </select>
</form>
</body>
</html>
================================================================================================
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
mrongAuthor Commented:
HI alorentz,

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

mrong
0
 
mrongAuthor Commented:
YZlat,

The sample you provide is pullind data from database. how about modify data on the form?
Thanks.
0
 
mrongAuthor Commented:
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.

0
 
Lord_McFlyCommented:
Have you tried my example - it does exactly what you have just described - please try it :)
0
 
Lord_McFlyCommented:
You only need to copy and paste it - it works 'as is' no database or anything needed - go on - give it a try :)
0
 
mrongAuthor Commented:
Hi Lord_McFly,

Let me try it.
Thanks.
0
 
mrongAuthor Commented:
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>
0
 
Lord_McFlyCommented:
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?
0
 
mrongAuthor Commented:
I am gonna hardcode them.
campus is dropdown1. value in BldgName(dropdown2) will be associated with dropdown1.
Thanks.
0
 
Lord_McFlyCommented:
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?
0
 
mrongAuthor Commented:
yes, I got this part.
0
 
Lord_McFlyCommented:
Then you just need to put you data into the array then like in the example and you're ready to rock and roll.
0
 
mrongAuthor Commented:
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>

0
 
Lord_McFlyCommented:
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.
0
 
Lord_McFlyCommented:
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>
0
 
Lord_McFlyCommented:
As one final check paste the whole page so I can have a quick look - but if it works then not to worry.
0
 
mrongAuthor Commented:
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>
0
 
Lord_McFlyCommented:
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?
0
 
mrongAuthor Commented:
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>

0
 
mrongAuthor Commented:
I can see "Please select." in dropdown1. so it only populate the options[0].text.
Thanks.
0
 
Lord_McFlyCommented:
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 :)
0
 
mrongAuthor Commented:
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!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.