SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Large arrays

  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Large arrays

    I have a large list of data which I am still not sure how to place into my code. I have a simple page with three select boxes and a div to display text once all three are filled.

    The information in the second select box is dependent on the first, the third to the second, and the div to the third.


    Example:

    First box options: (There are only two options, so they are hard coded in)
    Remote1, Remote2

    Second box options: (dependent on the first selection)
    If Remote1 was selected:
    TV, DVD
    If Remote2:
    VCR, DVD

    Third box options (dependent on both above selections)
    If Remote1/TV:
    Sony, Sanyo
    If Remote2/DVD:
    Panasonic, Daewoo

    Then the div will display codes dependent upon all three selections.
    I know I can do this with if statements and way too many lines of code, but I know there must be a better way.

    Thanks in advance for your help,
    Shane

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    It sounds like a database may be wanted to store such a large amount of data about each item.

    Perhaps the best way is to use Ajax techniques to submit the partial form data to a server-side page, which can use that data to query the database for potential items and send that list back to the web page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a way to do it using three select boxes and two js data arrays. It works in all browsers. When you click on the last option list an alert() tells you what you have selected in each box. You can use these sources to meet your own needs.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Select Products</title>
    <script type="text/javascript">
    <!--
    // initialise shortcuts on page load
    var selectObj1=null, selectObj2=null, selectObj3=null; // global
     function init()
      { selectObj1=document.getElementById("select_1");
        selectObj2=document.getElementById("select_2");
        selectObj2.disabled=true;
       // 
        selectObj3=document.getElementById("select_3");
        selectObj3.disabled=true;  
      }
    // ========== end init() ============== 
    // second select box options list
    var A= new Array()
    A["remote_1"]=["Select here ...","TV-1","DVD-1"];
    A["remote_2"]=["Select here ...","VCR-1","DVD-2"];
    //
    // third select box options list
    var B= new Array()
    B["TV-1"]=["Select here ...","Sony","Sanyo"];
    B["DVD-1"]=["Select here ...","Honda","Ford", "GMH"];
    B["VCR-1"]=["Select here ...","Red","Green","Blue"];
    B["DVD-2"]=["Select here ...","Panasonic","Daewoo"];
    //
    // global variables
    var saveObj=null, indx=null, targetObj=null, selectNo=null;   
    // 
     function process(obj,sNumb)
      { // disable unused select boxes 
        if(sNumb==2)
         { selectObj2.selectedIndex="0";
           selectObj2.disabled=true;
           selectObj3.selectedIndex="0";
           selectObj3.disabled=true;
         }
        else if( sNumb==3)
         { selectObj3.selectedIndex="0";
           selectObj3.disabled=true; 
         }
       //
       // store selected index   
        indx=obj.options.selectedIndex;
       // invalid selection 
        if(indx==0){ return; }
       // ---------
       // save passed parameters for use after timeout deleay   
        saveObj=obj, selectNo=sNumb;     
      // put object items list into next select box after clearing
         targetObj=document.getElementById("select_"+selectNo)
         targetObj.disabled=false;
       // clear any existing options note that this starts from end of list, not beginning  
         for(var i=targetObj.options.length-1;i>-1;i--)
              { targetObj.options[i]=null;  }   
      // build in short delay here to avoid error in Opera browser
          setTimeout("finishOff()",50)
        }
    // ----------- 50ms delay here --------   
    // called from timeout in function process()
       function finishOff()
        {  var obj=saveObj;    // from global
          // fill selectObj options  
           var i, thisItem=0;                         
          // build options list
           var targArray=(selectNo==2)?A[obj.options[indx].value] : B[obj.options[indx].value];
           for(i=0;i<targArray.length;i++)
             { thisItem=targArray[i];      
              // syntax is new Option("text", "value", isDefaultSelectedFlag, isSelectedFlag)
     
               targetObj.options[i]=new Option(thisItem,thisItem,false,false);    
             } 
         obj.blur(); 
      }
    // ============ end process() ===================
    // fires on selecting in third select box
     function finish()
      { alert("You have selected ["+selectObj1.value+"]  ["+selectObj2.value+"]  ["+selectObj3.value+"]")
      }
    // ------------  
    //
    window.onload=init;
    //-->
    </script>
    <style type="text/css">
    <!--
    #S1    { position:absolute; top:50px; left:10px; width:100px; text-align:left; }
    #S2    { position:absolute; top:50px; left:150px; width:100px; text-align:left; }
    #S3    { position:absolute; top:50px; left:300px; width:100px; text-align:left; }
    select { width:120px; }
    -->
    </style>
    </head>
     
    <body>
     
    <div id="S1">
      <select id="select_1" onchange="process(this,2)">
      <option value="0">Select here ....</option>
      <option value="remote_1">Remote 1</option>
      <option value="remote_2">Remote 2</option>
      </select>
    </div>
    <!-- end S1 -->
    <div id="S2">
      <select id="select_2" onchange="process(this,3)">
      <option value="0">Select here ....</option>
      </select></div>
    <!- end S2>
    <div id="S3">
      <select id="select_3" onchange="finish()">
      <option value="0">Select here ....</option>
      </select></div>
    <!-- end S3 -->
     
    </body>
     
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •