Solved

Dynamic linked dropdown box

Posted on 2004-04-16
26
520 Views
Last Modified: 2012-08-14
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
0
Comment
Question by:mrong
  • 12
  • 11
  • 2
  • +1
26 Comments
 
LVL 31

Expert Comment

by:alorentz
Comment Utility
0
 
LVL 31

Expert Comment

by:alorentz
Comment Utility
0
 

Author Comment

by:mrong
Comment Utility
HI alorentz,

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

mrong
0
 
LVL 35

Expert Comment

by:YZlat
Comment Utility
0
 

Author Comment

by:mrong
Comment Utility
YZlat,

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

Accepted Solution

by:
Lord_McFly earned 80 total points
Comment Utility
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
 

Author Comment

by:mrong
Comment Utility
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
 
LVL 6

Expert Comment

by:Lord_McFly
Comment Utility
Have you tried my example - it does exactly what you have just described - please try it :)
0
 
LVL 6

Expert Comment

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

Author Comment

by:mrong
Comment Utility
Hi Lord_McFly,

Let me try it.
Thanks.
0
 

Author Comment

by:mrong
Comment Utility
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
 
LVL 6

Expert Comment

by:Lord_McFly
Comment Utility
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
 

Author Comment

by:mrong
Comment Utility
I am gonna hardcode them.
campus is dropdown1. value in BldgName(dropdown2) will be associated with dropdown1.
Thanks.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 6

Expert Comment

by:Lord_McFly
Comment Utility
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
 

Author Comment

by:mrong
Comment Utility
yes, I got this part.
0
 
LVL 6

Expert Comment

by:Lord_McFly
Comment Utility
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
 

Author Comment

by:mrong
Comment Utility
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
 
LVL 6

Expert Comment

by:Lord_McFly
Comment Utility
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
 
LVL 6

Expert Comment

by:Lord_McFly
Comment Utility
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
 
LVL 6

Expert Comment

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

Author Comment

by:mrong
Comment Utility
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
 
LVL 6

Expert Comment

by:Lord_McFly
Comment Utility
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
 

Author Comment

by:mrong
Comment Utility
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
 

Author Comment

by:mrong
Comment Utility
I can see "Please select." in dropdown1. so it only populate the options[0].text.
Thanks.
0
 
LVL 6

Expert Comment

by:Lord_McFly
Comment Utility
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
 

Author Comment

by:mrong
Comment Utility
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

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Hello, all! I just recently started using Microsoft's IIS 7.5 within Windows 7, as I just downloaded and installed the 90 day trial of Windows 7. (Got to love Microsoft for allowing 90 days) The main reason for downloading and testing Windows 7 is t…
I was asked about the differences between classic ASP and ASP.NET, so let me put them down here, for reference: Let's make the introductions... Classic ASP was launched by Microsoft in 1998 and dynamically generate web pages upon user interact…
Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…
This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're looking for how to monitor bandwidth using netflow or packet s…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now