Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Cascading Dropdown from CSV

  1. #1
    Join Date
    Jun 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Cascading Dropdown from CSV

    Hello,

    I'm working on a project that requires a cascading dropdown. I found this site and this proves to be a viable solution (http://www.javascriptkit.com/script/...plecombo.shtml). I have edited the code to make it 4 boxes/options. The one part I am having trouble with is that my data set is large. and creating the dynamic piece of each match looks like it may be cumbersome. I wrote a little batch file (could have done it in any language I guess that will create the lines in the java script. I am looking for some help to maybe modify this code to read a .csv and populate the dropdowns dynamically. I would prefer not to use a DB, the CSV is optimal due to the way I receive the data and the frequency at which it updates (roughly 21 days) so it would be easier to upload a .csv, than to update a DB, or update the javascript.

    Thoughts? Does this post need to be moved?

    Thanks,

    Justin

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,814
    Thanks
    2
    Thanked 424 Times in 418 Posts

    Default

    Have you considered using an external JS file?

    the script you link to uses arrays

    these arrays could be defined in a .js file which would be loaded to the page when the page loads

    these arrays could be updated in the .js file as easily as producing a .CSV file

    http://www.javascriptkit.com/javatutors/external.shtml

    if this is not acceptable please provide an example of your .CSV file
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jul 2008
    Posts
    128
    Thanks
    0
    Thanked 17 Times in 16 Posts

    Default

    Presumably your CSV file must be formatted in such a way that the option hierarchy can be interpreted. If so I
    think the most efficient solution would be to create a simulated database using your CSV file, combined with a server side script that reads an id/value querystring sent from a client script, then generates the corresponding table of data for the client to download. That way you don't have to download your entire data set.
    If you can implement a suitable server-side interface, a suitable client-side script would be http://scripterlative.com/files/selectcascade.htm , which whenever a selection is made, sends an ID/value querystring to your specified script, expecting to receive a comma-delimited table in reply.

  4. #4
    Join Date
    Jun 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Changing Gears

    Ok, Great suggestions. I was able to write a quick batch script that converts each line of CSV to the html/javascript. I wont be working with that much data (I think) so I will save that conversion/database/csv import for a later date. I am going to paste the code below, but the problem I am having is that my 4th box does not update when I change the selection from the second or third drop-down.

    Here is what I have - Courtesy the link I shared earlier... (http://javascriptkit.com/script/scri...plecombo.shtml)


    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    /*
    Triple Combo Script Credit
    By Philip M: http://www.codingforums.com/member.php?u=186
    Visit http://javascriptkit.com for this and over 400+ other scripts
    */
    
    var categories = [];
    categories["startList"] = ["Apple","Samsung"]
    categories["Apple"] = ["Iphone 5 16GB","Iphone 5 32GB","Iphone 5 64GB","Iphone 4S 16GB","Iphone 4S 32GB","Iphone 4S 64GB","Iphone 4 8GB","Iphone 4 16GB","Iphone 4 32GB"];
    
    categories["Iphone 5 16GB"] = ["ATT","Verizon","Tmobile","Sprint"]; 
    categories["ATT"] = ["NewInBox - $550.00","Good - $400.00","Cracked - $280.00","Broken - $225.00","Dead - $210.00"];  
    categories["Verizon"] = ["NewInBox - $550.00","Good - $400.00","Cracked - $280.00","Broken - $225.00","Dead - $210.00"];  
    categories["Tmobile"] = ["NewInBox - $350.00","Good - $300.00","Cracked - $280.00","Broken - $150.00","Dead - $120.00"];  
    categories["Sprint"] = ["NewInBox - $350.00","Good - $280.00","Cracked - $280.00","Broken - $170.00","Dead - $140.00"];  
    /* --------------------------------------------------------------------- */ 
    categories["Iphone 5 32GB"] = ["ATT","Verizon","Tmobile","Sprint"]; 
    categories["ATT"] = ["NewInBox - $600.00","Good - $420.00","Cracked - $280.00","Broken - $225.00","Dead - $210.00"];  
    categories["Tmobile"] = ["NewInBox - $360.00","Good - $310.00","Cracked - $280.00","Broken - $150.00","Dead - $120.00"];  
    categories["Sprint"] = ["NewInBox - $360.00","Good - $290.00","Cracked - $280.00","Broken - $170.00","Dead - $150.00"];  
    categories["Verizon"] = ["NewInBox - $600.00","Good - $420.00","Cracked - $280.00","Broken - $225.00","Dead - $210.00"];  
    /* --------------------------------------------------------------------- */ 
    categories["Iphone 5 64GB"] = ["ATT","Verizon","Tmobile","Sprint"]; 
    categories["Verizon"] = ["NewInBox - $700.00","Good - $440.00","Cracked - $280.00","Broken - $225.00","Dead - $210.00"];  
    categories["ATT"] = ["NewInBox - $700.00","Good - $440.00","Cracked - $280.00","Broken - $225.00","Dead - $210.00"];  
    categories["Tmobile"] = ["NewInBox - $370.00","Good - $320.00","Cracked - $280.00","Broken - $150.00","Dead - $120.00"];  
    categories["Sprint"] = ["NewInBox - $370.00","Good - $300.00","Cracked - $280.00","Broken - $170.00","Dead - $160.00"];  
    /* --------------------------------------------------------------------- */ 
    categories["Iphone 4S 16GB"] = ["ATT","Verizon","Sprint"]; 
    categories["ATT"] = ["NewInBox - $400.00","Good - $280.00","Cracked - $250.00","Broken - $200.00","Dead - $90.00"];  
    categories["Sprint"] = ["NewInBox - $270.00","Good - $170.00","Cracked - $150.00","Broken - $120.00","Dead - $75.00"];  
    categories["Verizon"] = ["NewInBox - $270.00","Good - $210.00","Cracked - $170.00","Broken - $140.00","Dead - $75.00"];  
    /* --------------------------------------------------------------------- */ 
    categories["Iphone 4S 32GB"] = ["ATT","Verizon","Sprint"]; 
    categories["Sprint"] = ["NewInBox - $280.00","Good - $170.00","Cracked - $150.00","Broken - $120.00","Dead - $75.00"];  
    categories["Verizon"] = ["NewInBox - $280.00","Good - $210.00","Cracked - $170.00","Broken - $140.00","Dead - $75.00"];  
    categories["ATT"] = ["NewInBox - $410.00","Good - $280.00","Cracked - $250.00","Broken - $200.00","Dead - $90.00"];  
    /* --------------------------------------------------------------------- */ 
    categories["Iphone 4S 64GB"] = ["ATT","Verizon","Sprint"]; 
    categories["Verizon"] = ["NewInBox - $290.00","Good - $210.00","Cracked - $170.00","Broken - $140.00","Dead - $75.00"];  
    categories["ATT"] = ["NewInBox - $420.00","Good - $280.00","Cracked - $250.00","Broken - $200.00","Dead - $90.00"];  
    categories["Sprint"] = ["NewInBox - $290.00","Good - $170.00","Cracked - $150.00","Broken - $120.00","Dead - $75.00"];  
    /* --------------------------------------------------------------------- */ 
    categories["Iphone 4 8GB"] = ["ATT","Verizon","Sprint"]; 
    categories["ATT"] = ["NewInBox - $220.00","Good - $160.00","Cracked - $110.00","Broken - $80.00","Dead - $50.00"];  
    categories["Sprint"] = ["NewInBox - $100.00","Good - $90.00","Cracked - $60.00","Broken - $45.00","Dead - $30.00"];  
    categories["Verizon"] = ["NewInBox - $100.00","Good - $90.00","Cracked - $60.00","Broken - $45.00","Dead - $30.00"];  
    /* --------------------------------------------------------------------- */ 
    categories["Iphone 4 16GB"] = ["ATT","Verizon"]; 
    categories["ATT"] = ["NewInBox - $220.00","Good - $160.00","Cracked - $110.00","Broken - $80.00","Dead - $50.00"];  
    categories["Verizon"] = ["NewInBox - $100.00","Good - $90.00","Cracked - $60.00","Broken - $45.00","Dead - $30.00"];  
    /* --------------------------------------------------------------------- */ 
    categories["Iphone 4 32GB"] = ["ATT","Verizon"]; 
    categories["Verizon"] = ["NewInBox - $100.00","Good - $90.00","Cracked - $60.00","Broken - $45.00","Dead - $30.00"];  
    categories["ATT"] = ["NewInBox - $220.00","Good - $160.00","Cracked - $110.00","Broken - $80.00","Dead - $50.00"];  
    /* --------------------------------------------------------------------- */ 
    
    
    /* ------ This is here for a place holder ----- */
    categories["Samsung"] = ["Biography","Fiction","Nonfiction"];
    categories["Biography"] = ["Contemporay","Historical","Other"];
    categories["Fiction"] = ["Science Fiction","Romance", "Thrillers", "Crime"];
    categories["Nonfiction"] = ["How-To","Travel","Cookbooks", "Old Churches"];
    /* ------ End of place holder ------ */
    
    
    var nLists = 4; // number of select lists in the set
    
    function fillSelect(currCat,currList){
    var step = Number(currList.name.replace(/\D/g,""));
    for (i=step; i<nLists+1; i++) {
    document.forms['tripleplay']['List'+i].length = 1;
    document.forms['tripleplay']['List'+i].selectedIndex = 0;
    }
    var nCat = categories[currCat];
    for (each in nCat) {
    var nOption = document.createElement('option'); 
    var nData = document.createTextNode(nCat[each]); 
    nOption.setAttribute('value',nCat[each]); 
    nOption.appendChild(nData); 
    currList.appendChild(nOption); 
    } 
    }
    
    
    function getValue(L4, L3, L2, L1) {
    alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3 + "\n" + L4);
    }
    
    function init() {
    fillSelect('startList',document.forms['tripleplay']['List1'])
    }
    
    navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    </script> 
    </head>
    <body>
    
    <form name="tripleplay" action="">
    <select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
    <option selected>Make a selection</option>
    </select>
    &nbsp;
    <select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
    <option selected>Make a selection</option>
    </select>
    &nbsp;
    <select name='List3' onchange="fillSelect(this.value,this.form['List4'])">
    <option selected>Make a selection</option>
    </select>
    &nbsp;
    <select name='List4' onchange="getValue(this.value, this.form['List1'].value, this.form['List2'].value, this.form['List3'].value)">
    <option selected >Make a selection</option>
    </select>
    </br>
    </form>
    </body>
    </html>
    Could it be a problem with duplicating data values? (I.E. I use "ATT" quite a bit, or all the carriers for that matter). If so, What would be a good fix? Or am I missing something that refreshes the logic to find the correct data?

    Any help is appreciated!

    Thanks,

    Justin

  5. #5
    Join Date
    Jul 2008
    Posts
    128
    Thanks
    0
    Thanked 17 Times in 16 Posts

    Default

    Quote Originally Posted by jpsider View Post
    the problem I am having is that my 4th box does not update when I change the selection from the second or third drop-down.
    Works OK for me.

  6. #6
    Join Date
    Jun 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hmmm, while it displays prices, it does not display the correct prices. When I select :
    Iphone 5 16GB & ATT
    It gives me these options :
    "NewInBox - $220.00","Good - $160.00","Cracked - $110.00","Broken - $80.00","Dead - $50.00"
    While it should return :
    "NewInBox - $550.00","Good - $400.00","Cracked - $280.00","Broken - $225.00","Dead - $210.00"

    So it appears that everything is defaulting to the last set of "categories"

    Thoughts?

  7. #7
    Join Date
    Jul 2008
    Posts
    128
    Thanks
    0
    Thanked 17 Times in 16 Posts

    Default

    Quote Originally Posted by jpsider View Post
    So it appears that everything is defaulting to the last set of "categories"

    Thoughts?
    That's because you have duplicated array declarations, which exposes a serious shortcoming of this script.

    Normally I don't contribute to this site's scripts, but I may make an exception to fix this one.

  8. #8
    Join Date
    Jun 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I figured, Oh well. Back to the drawing board! I think this might be a viable solution (http://javascriptkit.com/script/scri...plecombo.shtml). It might just be more work on my end creating the Items. Thank you for taking a look!

  9. #9
    Join Date
    Jul 2008
    Posts
    128
    Thanks
    0
    Thanked 17 Times in 16 Posts

    Default

    Quote Originally Posted by jpsider View Post
    I figured, Oh well. Back to the drawing board! I think this might be a viable solution (http://javascriptkit.com/script/scri...plecombo.shtml). It might just be more work on my end creating the Items. Thank you for taking a look!
    I've created a viable apology for the 'triple combo' script. It still needs a bit of work before publishing but here's the working example. It uses a subset of your data, (enough for the first option in each list). You'll see how the array syntax has been changed to control the option hierarchy. All you have to do is add the rest of the data.

    Notes:

    The data for the first <select> is always hard-coded and is not part of the array.

    The first option in each table is a prompt.

    Code:
    <!doctype html>
    <html>
    <head>
    </head>
    <body>
    
    <form name="unlimitedSelects" action="">
      <select id='List1' name='List1' >
        <option selected>Select Manufacturer</option>
        <option value='Apple'>Apple</option>
        <option value='Samsung'>Samsung</option>
      </select>
      &nbsp;
      <select id='List2' name='List2' >
      </select>
      &nbsp;
      <select id='List3' name='List3' >
      </select>
      &nbsp;
      <select id='List4' name='List4' >
      </select>
    </br>
    </form>
    
    <script type="text/javascript">
    
    var categories = [];
    
    categories["Apple"] = ["Select Apple Device", "Iphone 5 16GB","Iphone 5 32GB","Iphone 5 64GB","Iphone 4S 16GB","Iphone 4S 32GB","Iphone 4S 64GB","Iphone 4 8GB","Iphone 4 16GB","Iphone 4 32GB"];
    
      categories["Apple||Iphone 5 16GB"] = ["Select Carrier", "ATT", "Verizon", "Tmobile", "Sprint"]; 
    
       categories["Apple||Iphone 5 16GB||ATT"] = ["Select Condition", "NewInBox - $550.00","Good - $400.00","Cracked - $280.00","Broken - $225.00","Dead - $210.00"];  
     
       categories["Apple||Iphone 5 16GB||Verizon"] = ["Select Condition","NewInBox - $550.00","Good - $400.00","Cracked - $280.00","Broken - $225.00","Dead - $210.00"];  
       
       categories["Apple||Iphone 5 16GB||Tmobile"] = ["Select Condition", "NewInBox - $350.00","Good - $300.00","Cracked - $280.00","Broken - $150.00","Dead - $120.00"];  
       
       categories["Apple||Iphone 5 16GB||Sprint"] = ["Select Condition", "NewInBox - $350.00","Good - $280.00","Cracked - $280.00","Broken - $170.00","Dead - $140.00"];  
    
       
    categories["Samsung"] = ["Select Samsung Device", "Iphone 5 16GB","Iphone 5 32GB","Iphone 5 64GB","Iphone 4S 16GB","Iphone 4S 32GB","Iphone 4S 64GB","Iphone 4 8GB","Iphone 4 16GB","Iphone 4 32GB"];
    
       categories[ "Samsung||Iphone 5 16GB" ] = ["Select Carrier","ATT","Verizon","Tmobile","Sprint"]; 
    
       categories["Samsung||Iphone 5 16GB||ATT"] = ["Select Condition", "Samsung NewInBox - $550.00","Good - $400.00","Cracked - $280.00","Broken - $225.00","Dead - $210.00"];  
     
       categories["Samsung||Iphone 5 16GB||Verizon"] = ["Select Condition", "Samsung NewInBox - $550.00","Good - $400.00","Cracked - $280.00","Broken - $225.00","Dead - $210.00"];  
       
       categories["Samsung||Iphone 5 16GB||Tmobile"] = ["Select Condition", "Samsung NewInBox - $350.00","Good - $300.00","Cracked - $280.00","Broken - $150.00","Dead - $120.00"];  
       
       categories["Samsung||Iphone 5 16GB||Sprint"] = ["Select Condition", "Samsung NewInBox - $350.00","Good - $280.00","Cracked - $280.00","Broken - $170.00","Dead - $140.00"];  
       
       
    
    function MultiSelect(  )
    {
      var theObject = function() 
      {
        this.boxes = {};
       
        theObject.prototype.init = function()
        {
          var args = MultiSelect.arguments, 
              inst = this;
          
          this.dataSet = args[ 0 ];      
          
          for( var i = 1, box, id; ( id = args[ i ] ); i++ )
          {
            if( !( box = this.$( id ) ) )
              alert( '<select id="' + id + '"> not found' );
            else  
            {
              this.boxes.push( box );
              
              if( i > 1 )
                box.style.display = 'none';
                
              if( i < args.length - 1 ) /*No handler on last box*/
                this.addListener( box, 'change', function( e ){ inst.changeHandler.call( inst, e ); } );
            }
          }
        }
        
        theObject.prototype.$ = function( id )
        {
          var elem = document.getElementById( id );
         
          return elem && elem.id === id ? elem : null;
        }
        
        theObject.prototype.changeHandler = function( evt )
        { 'use strict';   
          var selector = "", box, opts, thisBox = evt.srcElement || evt.target, nextBox;
         
          for( var idx = 0; ( box = this.boxes[ idx ] ) && this.boxes[ idx ] !== thisBox; idx++ )
            selector += ( idx == 0 ? "" : "||" ) + box.value;
            
          selector += ( idx == 0 ? "" : "||" ) + thisBox.value;  
         
          for( var i = idx + 1; this.boxes[ i ]; i++ )
          {
            this.boxes[ i ].options.length = 0;
            this.boxes[ i ].style.display = 'none';
          }
            
          if( thisBox.selectedIndex > 0 )
          {
            ( nextBox = this.boxes[ idx + 1 ] ).style.display = ''; 
              
            if( ( opts = this.dataSet[ selector ] ) )
              for( var i = 0, len = opts.length; i < len; i++ )
                nextBox.options.add( new Option( opts[ i ], opts[ i ] ) );      
          }     
        }
        
        theObject.prototype.addListener = function( elem, evt, func )
        {
          elem.addEventListener ? elem.addEventListener( evt, func, false )
                                : elem.attachEvent( 'on' + evt, func );     
        }
        
        this.init( /*28432927636C756566756C27206F6E2044796E616D69634472697665*/ );
        
      }  
      return new theObject();
    }
    
    
    MultiSelect( categories, 'List1', 'List2', 'List3', 'List4' );
    
    </script> 
    </body>
    </html>
    Now available here as a free script with documentation.
    Last edited by clueful; 07-03-2013 at 03:24 AM.

  10. #10
    Join Date
    Jun 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Wow, This is a more elegant way of doing it! Thank you for your time! I'll let you know if I run into any "gotcha's" but so far the transition is smooth. -Justin

Similar Threads

  1. PHP AJAX Cascading Dropdown listbox
    By goldd1gger in forum PHP
    Replies: 2
    Last Post: 07-01-2013, 07:49 AM
  2. CSS not cascading into table
    By gib65 in forum CSS
    Replies: 3
    Last Post: 08-26-2012, 07:20 AM
  3. Replies: 0
    Last Post: 03-25-2010, 02:14 PM
  4. Cascading tabs
    By rod_didier in forum JavaScript
    Replies: 1
    Last Post: 08-18-2009, 11:07 PM
  5. CSS - Cascading Style Sheets
    By Angel8552 in forum CSS
    Replies: 1
    Last Post: 07-11-2007, 02:04 PM

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
  •