?
Solved

Dynamic linked dropdown box

Posted on 2004-04-16
26
Medium Priority
?
531 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
 

Author Comment

by:mrong
ID: 10842904
HI alorentz,

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

mrong
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:mrong
ID: 10843400
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 320 total points
ID: 10850021
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
ID: 10859001
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
ID: 10859036
Have you tried my example - it does exactly what you have just described - please try it :)
0
 
LVL 6

Expert Comment

by:Lord_McFly
ID: 10859041
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
ID: 10859069
Hi Lord_McFly,

Let me try it.
Thanks.
0
 

Author Comment

by:mrong
ID: 10859206
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
ID: 10859236
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
ID: 10859309
I am gonna hardcode them.
campus is dropdown1. value in BldgName(dropdown2) will be associated with dropdown1.
Thanks.
0
 
LVL 6

Expert Comment

by:Lord_McFly
ID: 10859384
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
ID: 10859400
yes, I got this part.
0
 
LVL 6

Expert Comment

by:Lord_McFly
ID: 10859427
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
ID: 10859491
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
ID: 10859517
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
ID: 10859540
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
ID: 10859567
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
ID: 10859669
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
ID: 10859882
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
ID: 10859990
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
ID: 10860092
I can see "Please select." in dropdown1. so it only populate the options[0].text.
Thanks.
0
 
LVL 6

Expert Comment

by:Lord_McFly
ID: 10860109
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
ID: 10860149
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I recently decide that I needed a way to make my pages scream on the net.   While searching around how I can accomplish this I stumbled across a great article that stated "minimize the server requests." I got to thinking, hey, I use more than one…
Have you ever needed to get an ASP script to wait for a while? I have, just to let something else happen. Or in my case, to allow other stuff to happen while I was murdering my MySQL database with an update. The Original Issue This was written…
Please read the paragraph below before following the instructions in the video — there are important caveats in the paragraph that I did not mention in the video. If your PaperPort 12 or PaperPort 14 is failing to start, or crashing, or hanging, …
Loops Section Overview
Suggested Courses
Course of the Month16 days, 2 hours left to enroll

850 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