www.webdeveloper.com
Results 1 to 6 of 6

Thread: help with Reading a csv file and displaying in a dropdown box

  1. #1
    Join Date
    Jul 2014
    Posts
    1

    help with Reading a csv file and displaying in a dropdown box

    Hi

    I'm a Complete noob with javascipt haven't really touched it. I mainly use C#.net and asp.net

    I've been given a small dedicated device with a built in html 4 server so I can't use any server side features at all.

    Overall I need a html submit form with two dropdown boxes when one dropdown box changes items based to the first one.

    I'm thinking on having the first dropdown box be programmed by a csv file, and then when it the selected item changes, it reads another csv file and populates the second box based on the choice of the first.

    it doesn't have to be a csv file, it could also be a hard coded array aswell


    Can anyone give me an idea if its possible to do this without any server side involvement and not being html5

    Could anyone give me an idea on where to start looking, or where there is an example I could start from.


    Thanks

  2. #2
    Join Date
    Nov 2010
    Posts
    1,088
    they're called dependent select boxes (or dropdowns, or whatever). There are plenty of ways to make them. I find this to be easiest in terms of maintainability:
    Code:
    <body>
    <select id="main"></select>
    <select id="second"></select>
    <script>
    var arr1 =[], foods = {
    "fruits": ["apple", "pear", "orange"],
    "meat": ["chicken", "pork", "beef"],
    "vegetables": ["carrot", "potato", "onion"]
    }
    
    for (i in foods){
    arr1.push(i)
    }
    
    popDrop(arr1, "main", 1);
    
    function popDrop(arr, id, idx){
    var sel=document.getElementById(id);
    sel.options.length=0;
    if (idx!=0){
    sel.options[0] = new Option("Please Select", ""); 
    for (var i=0; i<arr.length; i++){
    sel.options[i+1] = new Option(arr[i], arr[i]); 
    		}
    	}
    }
    
    document.getElementById("main").onchange = function () {
    popDrop(foods[this.value], "second", this.selectedIndex);
    };
    </script>
    
    </body>

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,402
    If you can't use any server-sides, how are you going to process your form submissions?
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  4. #4
    Join Date
    Nov 2010
    Posts
    1,088
    Quote Originally Posted by \\.\ View Post
    If you can't use any server-sides, how are you going to process your form submissions?
    haha. good question. Didn't see the wood for the trees on that one

    a slightly simpler version of the previously posted solution...
    Code:
    <body>
    <select id="main">
    <option>Please Select</option>
    </select>
    <select id="second"></select>
    <script>
    var opts = 0, foods = {
    fruits: ["apple", "pear", "orange"],
    meat: ["chicken", "pork", "beef"],
    vegetables: ["carrot", "potato", "onion"]
    }
    
    for (i in foods){
    document.getElementById("main").options[++opts] = new Option(i, i); 
    }
    
    document.getElementById("main").onchange = function () {
    var sel=document.getElementById("second");
    sel.length=0;
    if (this.selectedIndex!=0){
    var arr=foods[this.value];
    sel.options[0] = new Option("Please Select", ""); 
    for (var i=0; i<arr.length; i++){
    sel.options[i+1] = new Option(arr[i], arr[i]); 
    		}
    	}
    };
    </script>
    
    </body>

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,410

    Lightbulb

    @xelawho

    I liked your dual dropdown simplified post, so I shortened it a bit more and made it more multi-purpose.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Dual Dropdowns </title>
    </head>
    <body>
    <select id="L0"></select> <select id="L1"></select>
    <button onclick="alert($_('L0').value+' : '+$_('L1').value)">Picks</button>
    <p>
    <select id="c0"></select> <select id="c1"></select>
    <button onclick="alert($_('c0').value+' : '+$_('c1').value)">Picks</button>
    <p>
    <select id="k0"></select> <select id="k1"></select>
    <button onclick="alert($_('k0').value+' : '+$_('k1').value)">Picks</button>
    
    <script>
    function $_(IDS) { return document.getElementById(IDS); }
    var foods = {
          Select: [''],
          meat: ['Select', "lamb", "pork", "beef"],
          fowl: ['Select', "chicken", "quail", "turkey"],
          fruits: ['Select', "apple", "pear", "orange"],
          vegetables: ['Select', "carrot", "potato", "onion"]
        }
    var autos = {
          Select: [''],
          Ford: ['Select', 'Mustang', 'Tarus', 'F-150'],
          GM: ['Select', 'Corvette', 'SuperSport', 'Silverado'],
          Chrysler: ['Select', 'Viper', 'Crossfire', 'Dodge Ram']
        }
    var clothes = {
          Select: [''],
          Men: ['Select', 'Hat','Shirt','Tie','Trousers','Belt','Shoes'],
          Women: ['Select','Veil','Blouse','Scarf','Pants','Belt','Heels'],
          Kids: ['Select','Cap','T-shirt','Shorts','Sneakers']
        }
    
    function dualDD(id1, arrDD, id2) {
      var opts = 0;
      for (i in arrDD) { $_(id1).options[opts++] = new Option(i, i); }
      $_(id1).onchange = function () {
        var sel = $_(id2);
        sel.length = 0;
        var arr = arrDD[this.value];
        for (opts=0; opts<arr.length; opts++) { sel.options[opts]=new Option(arr[opts],arr[opts]); }
      }
    }
    
    dualDD('L0', foods, 'L1');
    dualDD('c0', autos, 'c1');
    dualDD('k0', clothes, 'k1');
    
    </script>
    
    </body>
    </html>
    What do you think?

  6. #6
    Join Date
    Nov 2010
    Posts
    1,088
    Not bad. I made a triple, just for S&Gs, although I imagine that accounting for every scenario would get complicated if you were to actually use it somewhere...

    Code:
    <body>
    <select id="main">
    <option>Please Select</option>
    </select>
    <select id="second"></select>
    <select id="third"></select>
    <script>
    
    var opts = 0, menu = {
    food: {fruits: ["apple", "pear", "orange"],
    		meat: ["chicken", "pork", "beef"],
    bread: ["rolls", "wholemeal", "white"]
    },
    drinks: {alcohol: ["beer", "wine", "cider"],
    		sodas: ["coke", "fanta", "sprite"],
    		juices: ["orange", "apple", "grape"]
    },
    snacks: {healthy: ["apples", "rice cakes", "granola bar"],
    		fried: ["french fries", "meat balls", "egg"],
    		baked: ["muffin", "cookie", "brownie"]
    	}
    }
    for (i in menu){
    document.getElementById("main").options[++opts] = new Option(i, i); 
    }
    
    document.getElementById("main").onchange = changer;
    document.getElementById("second").onchange = changer;
    
    function changer() {
    if (this.selectedIndex!=0){
    if(this.id=="main"){
    var sel=document.getElementById("second");
    var arr=Object.keys(menu[this.value]);
    } else {
    var sel=document.getElementById("third");
    var arr=menu[document.getElementById("main").value][this.value];
    }
    sel.options[0] = new Option("Please Select", ""); 
    for (var i=0; i<arr.length; i++){
    sel.options[i+1] = new Option(arr[i], arr[i]); 
    		}
    	}
    };
    </script>
    
    </body>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles