Solved

Dynamic linked dropdown box

Posted on 2004-04-16
26
522 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
ID: 10842855
0
 
LVL 31

Expert Comment

by:alorentz
ID: 10842860
0
 

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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 35

Expert Comment

by:YZlat
ID: 10843178
0
 

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 80 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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Suggested Solutions

I have helped a lot of people on EE with their coding sources and have enjoyed near about every minute of it. Sometimes it can get a little tedious but it is always a challenge and the one thing that I always say is:  The Exchange of information …
This demonstration started out as a follow up to some recently posted questions on the subject of logging in: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28634665.html and http://www.experts-exchange.com/Programming/…
This Micro Tutorial hows how you can integrate  Mac OSX to a Windows Active Directory Domain. Apple has made it easy to allow users to bind their macs to a windows domain with relative ease. The following video show how to bind OSX Mavericks to …
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …

803 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