Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    building cascading drop down boxes

    I have built a spreadsheet in MS Excel whereby selection of an option from the master drop down box populates three other drop down boxes as part of a form to be emailed. This must be made into a web page.

    I have been looking at the single/double combo drop-down boxes and need something along the same but they tend to be built around the assumption that each drop down box is dependent on the selection of the previous.

    Attached is a txt file that should illustrate what I'm after.

    Box 1-4 are four drop down boxes.
    Alphabetical letters represent the option values that are populated after intial selection of A,B or C from box 1.

    1|2 |3 | 4
    A|D |E-G|H,I
    B|J-P |E-G|Q-W
    C|D |D |Y

    For example, selecting A from box 1 would populate value D in box 2, values E thru G in box 3, and values H and I in drop down box 4.

    I can follow javascript but have a terrible time writing from scratch. Any help on this matter would be most appreciated.
    Best regards.
    Last edited by dkeppie; 08-23-2002 at 10:26 PM.

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This seems to do the trick
    Code:
    <html>
    <head>
    <title>Test</title>
    <script>
    var selData = new Array();
    selData['A'] = new Array('D','E,F,G','H,I');
    selData['B'] = new Array('J,K,L,M,N,O,P','E,F,G','Q,R,S,T,U,V,W');
    selData['C'] = new Array('D','D','Y');
    
    function setSelects(val) {
    	var sel2 = document.getElementById('select2');
    	var sel3 = document.getElementById('select3');
    	var sel4 = document.getElementById('select4');
    
    	var vals2 = selData[val][0].split(/\,/);
    	var vals3 = selData[val][1].split(/\,/);
    	var vals4 = selData[val][2].split(/\,/);
    
    	addOptions(sel2, vals2);
    	addOptions(sel3, vals3);
    	addOptions(sel4, vals4);
    	}
    	
    function addOptions(obj, values) {
    	while (obj.hasChildNodes())
    		obj.removeChild(obj.lastChild);
    	for (var i in values) {
    		var o = document.createElement("option");
    		o.setAttribute("value",values[i]);
    		var txt = document.createTextNode(values[i]);
    		obj.appendChild(o);
    		o.appendChild(txt);
    		}
    	}
    
    </script>
    </head>
    <body>
    
    <form action="test.htm" method="get">
    	<select id="select1" name="select1" onChange="setSelects(this.options[this.selectedIndex].value)">
    	<option selected>---</option>
    	<option value="A">A</option>
    	<option value="B">B</option>
    	<option value="C">C</option>
    	</select>
    
    	<select id="select2" name="select2">
    	<option selected>---</option>
    	</select>
    
    	<select id="select3" name="select3">
    	<option selected>---</option>
    	</select>
    
    	<select id="select4" name="select4">
    	<option selected>---</option>
    	</select>
    	<input type="submit" value="go">
    </form>
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Aug 2002
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    working like a charm. simple and pretty straightforward when i look at it.
    many thanks.


  •  

    Posting Permissions

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