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 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2006
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    interdependent select

    hi there,

    i have here a fully functioning interdependent select form, but i'd like to add a third select box related to the second select, is there anyway i can do this based on the following script?
    thanks in advance!
    Code:
    <html>
    <head>
    <script language="JavaScript" type="text/javascript">
    <!--
     function hide(id){
    if (document.getElementById && document.createTextNode){
    spans=document.getElementById('mainform').getElementsByTagName('span');
    m=document.getElementById('mainform');
    for (i=0;i<spans.length;i++){
    	m.getElementsByTagName('span')[i].style.visibility='hidden';					
    	m.getElementsByTagName('p')[i].style.background='#eee';					
    	m.getElementsByTagName('p')[i].style.borderColor='#ccc';					
    }
    if(id!='none'){			
    	m.getElementsByTagName('span')[id].style.visibility='visible';					
    	m.getElementsByTagName('p')[id].style.background='#ffc';					
    	m.getElementsByTagName('p')[id].style.borderColor='#000';					
    		}
    	}
    }
    
    function popsel(choice){
    	var opts=new Array();
    	opts[1]=" ,a1,a2".split(',');
    	opts[2]=" ,b1,b2,b3".split(',');
    	document.forms[0].select1.options.length=0;
    	topop=opts[choice];
    	document.forms[0].select1.options.length=topop.length;
    	for (i=0;i<topop.length;i++){
    	document.forms.example.select1.options[i].text=topop[i];
    	}
    }	
    //-->
    </script>	
    </head>
    <body onload="hide('none')">
    <form name="example">
    <label for="choice">Category</label>
    <select name="choice" id="choice" onchange="popsel(this.options[this.selectedIndex].value)">
    	<option value="0"></option>
    	<option value="1">A</option>
    	<option value="2">B</option>
    </select><BR>
    		<label for="select1">Sub-Cat-1</label>
    		<select name="select1"  id="select1">
    		<option value="0"></option>
    		</select> 	<BR>
    </form>
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This demo is one way of doing it. A better way (more accessible) is illustrated by xSelect, but it doesn't support the extra sub-select.

    cross-forum ref

  • #3
    New Coder
    Join Date
    Jun 2006
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks Mike,

    i think the first demo is exactly what im looking for, im going have a closer look at the way it's coded.

    thanks again for your help!

  • #4
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts


  •  

    Posting Permissions

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