COMBO - relation issues

Example : I have got 4 combo, all fetches values from the database.

Combo 1 : Master combo

Combo 2, Combo 3, Combo 4 : Child Combos

Based on the value selected in Master combo, it will display possible values in rest of the combos.

I have to this at client side.

So when we load the ASP page, it fetches the values from the database for all the combos.
But values displayed for CHILD combos would depend on the selection of value in MASTER COMBO.

Again don't wont to make call to the server. Want to do everything at client side.

Hope you understand, what im looking for.

Lokesh
radhakrishan1Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
Then you need to dump the entire database to javascript.

You can use xmlhttp to get the data later, but that WILL access your server. How would you get data from the server without accessing the server?

Michel
0
robotman757Commented:
Yes, you can do this, and there are a couple of ways to approach it. Getting the values from the database and storing them in hidden fields as comma seperated values based on the choices in the master combo. You could go through the record set multiple times by a loop and create a value 'list' for each choice in the master combo. It really depends on the amount of data and what combos you want to have certain data in. You can even use arrays if you want, but that is more memory intensive I think..
0
radhakrishan1Author Commented:
For robotman757:

Its easy when you have to fetch the value from the server side.

When somebody selects the value in mASTER COMBO, On is CHANGE event it can go to the server and fetch all values based on the selection for rest of combos.

Can you give any code how you have used array concepts in this or may be any working example of using hidden fields.

Lokesh
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

James RodgersWeb Applications DeveloperCommented:
are you looking for something like this?

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>
        Untitled
    </title>
<script language="JavaScript" type="text/javascript">
var obj;
function lateralShift(selFrom, selTo) {
    var i ;
       with (document.forms[0]) {
            SelRight = selFrom.selectedIndex;
         
          if ((SelRight >= 0)  && (selFrom.selectedIndex < selFrom.options.length)) {
             selTo.options[selTo.options.length] = new Option(selFrom.options[SelRight].text, selFrom.options[SelRight].value);

             with (selFrom) {
                   for (i=SelRight; i < options.length; i++) {
                             if (i < options.length-1)
                        options[i] = new Option(options[i+1].text, options[i+1].value);
                      }
                    options.length --;

                    if (SelRight < options.length) selectedIndex = SelRight;
                      else selectedIndex = options.length - 1;
             }
       
          }
     }
}

     
function verticalShift(objSel, vDir){
var Sel, SelTo, Last, TempT, TempV;
 
       with (document.forms[0]) {
          Sel   = objSel.selectedIndex;
          SelTo = objSel.selectedIndex + vDir;
          Last  = objSel.options.length;

               if ((Sel >= 0 && vDir==1 && Sel < Last -1) || (Sel <= Last && Sel > 0 && vDir ==-1)) {
           with (objSel) {              
          TempT = options[Sel].text;
          TempV = options[Sel].value;
          options[Sel] = new Option( options[SelTo].text, options[SelTo].value);
          options[SelTo] = new Option( TempT, TempV );
                         selectedIndex = SelTo;
                    }    
               }    
          }
}


     var arrItems = new Array();
     var isVisible=0;
     function listItem(itemGroup, itemValue, itemText){
          this.itemGroup=itemGroup;
          this.itemValue=itemValue;
          this.itemText=itemText;
     }
     
     function populateSubList(groupID, objSub){
//this block clears the current listings in the second dropdown, if the dropdown has any
          objSub.selectedIndex=0;
          isVisible=0;
          if(objSub.options.length>0){
               for (x=objSub.options.length; x>=0; x--){
                    objSub.options[x]=null;
               }
          }
//this block populates the second drop down, by matching the selected value of dropdown 1
//to the lookup value of the list items
          for(x=0; x < arrItems.length; x++){
               if(arrItems[x].itemGroup==groupID){
                    listOpt = document.createElement("option") ;
                    listOpt.value = arrItems[x].itemValue ;
                    listOpt.text = arrItems[x].itemText ;
                    objSub.add(listOpt) ;
               }
          }

     }
     
// arrayItem = new listItem(lookupcode, listItem value, listItem Text)
// arrayItem = new listItem(categorycode, productcode, product text)
     arrItems[arrItems.length] = new listItem("M","M1","Suzuki");
     arrItems[arrItems.length] = new listItem("M","M3","Honda");
     arrItems[arrItems.length] = new listItem("M","M6","Titan");
     arrItems[arrItems.length] = new listItem("M","M4","Buccatti");
     arrItems[arrItems.length] = new listItem("M","M5","BMW");
     arrItems[arrItems.length] = new listItem("M","M2","Harley Davidson");
     arrItems[arrItems.length] = new listItem("C","C29","Corvette");
     arrItems[arrItems.length] = new listItem("C","C13","Ferrarri");
     arrItems[arrItems.length] = new listItem("C","C7","Lamborghini");
     arrItems[arrItems.length] = new listItem("C","C99","Viper");
     arrItems[arrItems.length] = new listItem("C","C4","Mustang");
     arrItems[arrItems.length] = new listItem("C","C20","GTO");
     arrItems[arrItems.length] = new listItem("C","C21","De Lorean");
     arrItems[arrItems.length] = new listItem("P","P1","Cessna");
     arrItems[arrItems.length] = new listItem("P","P23","767");
     arrItems[arrItems.length] = new listItem("P","P31","Airbus");
     arrItems[arrItems.length] = new listItem("P","P17","SST");
     arrItems[arrItems.length] = new listItem("P","P33","Sea Harrier");
     arrItems[arrItems.length] = new listItem("P","P10","F16");
     arrItems[arrItems.length] = new listItem("B","B34","Row Boat");
     arrItems[arrItems.length] = new listItem("B","B3","Cigarette Boat");
     arrItems[arrItems.length] = new listItem("B","B25","Fishing Boat");
     arrItems[arrItems.length] = new listItem("B","B19","Cabin Cruiser 6");
     arrItems[arrItems.length] = new listItem("T","T11","Hummer");
      arrItems[arrItems.length] = new listItem("M1","M1A","Bike1");
      arrItems[arrItems.length] = new listItem("M1","M1B","Bike2");
      arrItems[arrItems.length] = new listItem("M1","M1C","Bike3");
      arrItems[arrItems.length] = new listItem("M1","M1D","Bike4");
      arrItems[arrItems.length] = new listItem("M1","M1E","Bike5");
      arrItems[arrItems.length] = new listItem("M1","M1F","Bike6");
</script>
</head>
   <body>        
      <form name="frmGetTracker" action="displayTracker.cfm?RequestTimeout=500" onsubmit="" method="get">
           <table cellspacing="1" cellpadding="1" border="0" width="400" bgcolor="D8DFF3">
                <tr valign="top">
                     <td width="50%">
                          <table cellspacing="1" cellpadding="1" border="0" align="centre">
                               <caption>     View By :
                               </caption>
                               <tr valign="top">
                                    <td align="center">
                                         <select name="VOPT" style="width:160" onChange="populateSubList(this.value, document.frmGetTracker.VID)">
                                              <option value="0" selected>--Select Vehicle Type</option>
                                              <option value="M">Motorcycle</option>
                                              <option value="C">Car</option>
                                              <option value="T">Truck</option>
                                              <option value="B">Boat</option>
                                              <option value="P">Plane</option>
                                         </select>
                                    </td>
                               </tr>
                          </table>
                     </td>
                     <td>
                          <table cellspacing="1" cellpadding="1" border="0" width="100%">
                               <caption>     Select Name :
                               </caption>
                               <tr>
                                    <td align="center">
                                         <select name="VID" style="width:160" multiple size="6">
                                        </select>
                                    </td>
                               </tr>
                          </table>
                     </td>
                         
                         <td>
                              <table>
                                   <caption>&nbsp;</caption>
                                   <tr>
                              <TD>

  <INPUT TYPE="BUTTON" VALUE=">>" onClick="lateralShift(this.form.VID, this.form.L4)"><BR>
  <INPUT TYPE="BUTTON" VALUE="<<" onClick="lateralShift(this.form.L4, this.form.VID)">

</TD>


<TD>
L3<SELECT NAME="L4" SIZE="6" STYLE="width:150px" MULTIPLE onClick="obj=this" onDblClick="lateralShift(this, this.form.L5)">
</SELECT></TD><TD>

  <INPUT TYPE="BUTTON" VALUE=">>" onClick="lateralShift(this.form.L4, this.form.L5)"><BR>
  <INPUT TYPE="BUTTON" VALUE="<<" onClick="lateralShift(this.form.L5, this.form.L4)">

</TD>


<TD>
L23<SELECT NAME="L5" SIZE="6" STYLE="width:150px" MULTIPLE onClick="obj=this" onDblClick="lateralShift(this, this.form.L2)">
</SELECT></TD><TD>
  <INPUT TYPE="BUTTON" VALUE="UP" onClick="verticalShift(obj,-1)" style="width:25px"><BR>
  <INPUT TYPE="BUTTON" VALUE="DN" NAME="BtnDn" onClick="verticalShift(obj,1)" style="width:25px">

</TD></table>
                         </td></tr>
                         



                </tr>
           </table>
      </form>
   </body>
</html>
0
James RodgersWeb Applications DeveloperCommented:
or more like this?

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>
        Untitled
    </title>
<script language="JavaScript" type="text/javascript">var arrItems = new Array();
     var isVisible=0;
     function listItem(itemGroup, itemValue, itemText){
          this.itemGroup=itemGroup;
          this.itemValue=itemValue;
          this.itemText=itemText;
     }
     
     function populateSubList(groupID, objSub){
//this block clears the current listings in the second dropdown, if the dropdown has any
          objSub.selectedIndex=0;
          isVisible=0;
          if(objSub.options.length>1){
               for (x=objSub.options.length; x>0; x--){
                    objSub.options[x]=null;
               }
          }
//this block populates the second drop down, by matching the selected value of dropdown 1
//to the lookup value of the list items
          for(x=0; x < arrItems.length; x++){
               if(arrItems[x].itemGroup==groupID){
                    listOpt = document.createElement("option") ;
                    listOpt.value = arrItems[x].itemValue ;
                    listOpt.text = arrItems[x].itemText ;
                    objSub.add(listOpt) ;
               }
          }

     }
     
// arrayItem = new listItem(lookupcode, listItem value, listItem Text)
// arrayItem = new listItem(categorycode, productcode, product text)
     arrItems[arrItems.length] = new listItem("M","M1","Suzuki");
     arrItems[arrItems.length] = new listItem("M","M3","Honda");
     arrItems[arrItems.length] = new listItem("M","M6","Titan");
     arrItems[arrItems.length] = new listItem("M","M4","Buccatti");
     arrItems[arrItems.length] = new listItem("M","M5","BMW");
     arrItems[arrItems.length] = new listItem("M","M2","Harley Davidson");
     arrItems[arrItems.length] = new listItem("C","C29","Corvette");
     arrItems[arrItems.length] = new listItem("C","C13","Ferrarri");
     arrItems[arrItems.length] = new listItem("C","C7","Lamborghini");
     arrItems[arrItems.length] = new listItem("C","C99","Viper");
     arrItems[arrItems.length] = new listItem("C","C4","Mustang");
     arrItems[arrItems.length] = new listItem("C","C20","GTO");
     arrItems[arrItems.length] = new listItem("C","C21","De Lorean");
     arrItems[arrItems.length] = new listItem("P","P1","Cessna");
     arrItems[arrItems.length] = new listItem("P","P23","767");
     arrItems[arrItems.length] = new listItem("P","P31","Airbus");
     arrItems[arrItems.length] = new listItem("P","P17","SST");
     arrItems[arrItems.length] = new listItem("P","P33","Sea Harrier");
     arrItems[arrItems.length] = new listItem("P","P10","F16");
     arrItems[arrItems.length] = new listItem("B","B34","Row Boat");
     arrItems[arrItems.length] = new listItem("B","B3","Cigarette Boat");
     arrItems[arrItems.length] = new listItem("B","B25","Fishing Boat");
     arrItems[arrItems.length] = new listItem("B","B19","Cabin Cruiser 6");
     arrItems[arrItems.length] = new listItem("T","T11","Hummer");
       arrItems[arrItems.length] = new listItem("M1","M1A","Bike1");
       arrItems[arrItems.length] = new listItem("M1","M1B","Bike2");
       arrItems[arrItems.length] = new listItem("M1","M1C","Bike3");
       arrItems[arrItems.length] = new listItem("M1","M1D","Bike4");
       arrItems[arrItems.length] = new listItem("M1","M1E","Bike5");
       arrItems[arrItems.length] = new listItem("M1","M1F","Bike6");
</script>
</head>
   <body>        
      <form name="frmGetTracker" action="displayTracker.cfm?RequestTimeout=500" onsubmit="" method="get">
           <table cellspacing="1" cellpadding="1" border="0" width="400" bgcolor="D8DFF3">
                <tr valign="top">
                     <td width="50%">
                          <table cellspacing="1" cellpadding="1" border="0" align="centre">
                               <caption>     View By :
                               </caption>
                               <tr valign="top">
                                    <td align="center">
                                         <select name="VOPT" style="width:160" onChange="populateSubList(this.value, document.frmGetTracker.VID)">
                                              <option value="0" selected>--Select Vehicle Type</option>
                                              <option value="M">Motorcycle</option>
                                              <option value="C">Car</option>
                                              <option value="T">Truck</option>
                                                         <option value="B">Boat</option>
                                                         <option value="P">Plane</option>
                                         </select>
                                    </td>
                               </tr>
                          </table>
                     </td>
                     <td>
                          <table cellspacing="1" cellpadding="1" border="0" width="100%">
                               <caption>     Select Name :
                               </caption>
                               <tr>
                                    <td align="center">
                                         <select name="VID" style="width:160" onChange="populateSubList(this.value, document.frmGetTracker.SUBVID)">
                                              <option value="0" selected>--Select Brand</option>
                                         </select>
                                    </td>
                               </tr>
                          </table>
                     </td>
                               <td>
                          <table cellspacing="1" cellpadding="1" border="0" width="100%">
                               <caption>     Select Name :
                               </caption>
                               <tr>
                                    <td align="center">
                                         <select name="SUBVID" style="width:160" >
                                              <option value="0" selected>--Select Brand</option>
                                         </select>
                                    </td>
                               </tr>
                          </table>
                     </td>
                </tr>
           </table>
      </form>
   </body>
</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
robotman757Commented:
Jester had the code handy...it looks good too.
0
James RodgersWeb Applications DeveloperCommented:
this one comes up often, i keep a big directory of code snippets ... just to be safe
0
radhakrishan1Author Commented:
2nd one is a very good example.

One thing :

Im my case, I want to fill the array from the database.

Means, I should call a stored procedure in the ASP page and then go thru the recordset. Within the recordset you call this javascript function (array function ) which will then populate array.

Whats the best the way to populate this array in JAVASCRIPT getting the info from the database.

0
James RodgersWeb Applications DeveloperCommented:
the array used is populated from a db this is just the html source

 arrItems[arrItems.length] = new listItem("M","M1","Suzuki");
     arrItems[arrItems.length] = new listItem("M","M3","Honda");

or
if you stored the query output in a recordset variable called rst
<%rst.movefirst%>
<% while not rst.eof %>
     arrItems[arrItems.length] = new listItem("<%=key%>","<%=optValue%>","<%=optText%>");
<%rst.movenext%>
<wend%>
0
justinbilligCommented:
if you have to go back to the database after selecting hte master option why not just have the asp write out the tags normaly? instead of waiting for the page to load then waiting for the javascript to execute
0
radhakrishan1Author Commented:
But is this arrItems referening to one you declared in SCRIPT code ????

Excellent example. I will accept this as answer.

Pls clarify this last doubt, that while iterating thru recordset I want to point to array object delcared in Javascript function.
0
radhakrishan1Author Commented:
if you have to go back to the database after selecting hte master option why not just have the asp write out the tags normaly? instead of waiting for the page to load then waiting for the javascript to execute

Can't understand this :

Yes, after inputting all the data, user will click on Save button, and information will be sent to the server.

What do you mean by ASP write out tags ???????
0
James RodgersWeb Applications DeveloperCommented:
>>Pls clarify this last doubt, that while iterating thru recordset I want to point to array object delcared in Javascript function

correct, use the ouput of the query to create the javascript array
0
James RodgersWeb Applications DeveloperCommented:
glad i could help


thanks for the points
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

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.