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
    May 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Trouble clearing third of three dropdowns

    Hi everyone,

    I have been trying to create a form with 3 dropdowns. When you choose from the first called field4 it populates the next called field5

    Similarly when you choose from field5 then field6 gets populated.

    It all seemed to work fine but then I realised that if I changed the first drop to another choice after having made choices from the other two drops then there was a problem. The second drop changed fine but I then wanted the third drop to become "Choose One" until a choice had again been made from the Second drop. (Hope that makes sense!)

    Anyway, I have almost done it, but if I change my first drop now (with the third drop set to a choice) then the third drop appears to change to be completely blank and I have a choice of blank or "Choose one"

    Here is my code, I'm no Javascript expert and I have been struggling on this for hours - I am sure one of the experts here can spot in an instant where I have gone wrong. - I have put *** infront of the lines I added which I thought would do the trick for me

    Thanks very much in advance

    Code:
    <SCRIPT LANGUAGE = "JAVASCRIPT">
    var emptyOption=('Choose One,0')
    var arr1=new Array('','Accountancy,31','Banking,30');
    var arr6=new Array('','Teaching,29');
    var arr29=new Array('','Music teacher,1');
    var arr30=new Array('','Bank Clerk,2','Bank Manager,3');
    var arr31=new Array('','Accountant,4','Financial Controller,5');
    var selArr=new Array();
    var selArr2=new Array();
    var testIt;
    function setOptions(chosen) {
    testIt="";
    var selbox = document.form1.field5;
    *** var selboxx = document.form1.field6;
    selbox.options.length = 0;
    *** selboxx.options.length = 0;
    if (chosen == "0") {
    selbox.options[selbox.options.length] = new Option('Choose One',' ');
    *** selboxx.options[selbox.options.length] = new Option('Choose One',' ');
    }
    if (chosen != "0") {
    eval('selArr=arr'+(parseInt(chosen)));
    selbox.options[selbox.options.length] = new Option('Choose One','0');
    *** selboxx.options[selbox.options.length] = new Option('Choose One','0');
    for (var i = 1;i < selArr.length;i++){
    selArr2=selArr[i].split(",");
    testIt +=selArr2[0]+' - '+selArr2[1]+'\n';
    selbox.options[selbox.options.length] = new Option(selArr2[0],selArr2[1]);
    }
    }
    }
    function setJOptions(chosen) {
    testIt="";
    var selbox = document.form1.field6;
    selbox.options.length = 0;
    if (chosen == "0") {
    selbox.options[selbox.options.length] = new Option('Choose One',' ');
    }
    if (chosen != "0") {
    eval('selArr=arr'+(parseInt(chosen)));
    selbox.options[selbox.options.length] = new Option('Choose One','0');
    for (var i = 1;i < selArr.length;i++){
    selArr2=selArr[i].split(",");
    testIt +=selArr2[0]+' - '+selArr2[1]+'\n';
    selbox.options[selbox.options.length] = new Option(selArr2[0],selArr2[1]);
    }
    }
    }
    </SCRIPT>

  • #2
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, no replies and I am still struggling to make this work myself.

    I'll try and explain the problem again, maybe my first attempt was poorly written and confusing.

    I have three dropdowns in my form like this:

    Code:
    <select name="field4" onchange="setOptions(document.form1.field4.options[document.form1.field4.selectedIndex].value);">
    
    <select name="field5" onchange="setJOptions(document.form1.field5.options[document.form1.field5.selectedIndex].value);">
    
    <select name="field6">
    On the first drop field4 I call setOptions and on the second field5 I call setJOptions (slightly different name)

    How can I make setOptions reset the third dropdown (field6) to contain just "Choose one" whenever field4 is changed?

    Here is my abbreviated code for setOptions

    Code:
    <SCRIPT LANGUAGE = "JAVASCRIPT">
    var emptyOption=('Choose One,0')
    var arr1=new Array('','Accountancy,31','Banking,30');
    var arr6=new Array('','Teaching,29','Lecturing,28');
    var selArr=new Array();
    var selArr2=new Array();
    var testIt;
    function setOptions(chosen) {
    testIt="";
    var selbox = document.form1.field5;
    selbox.options.length = 0;
      if (chosen == "0") {
      selbox.options[selbox.options.length] = new Option('Choose One',' ');
      }
       if (chosen != "0") {
       eval('selArr=arr'+(parseInt(chosen)));
       selbox.options[selbox.options.length] = new Option('Choose One','0');
       for (var i = 1;i < selArr.length;i++){
       selArr2=selArr[i].split(",");
       testIt +=selArr2[0]+' - '+selArr2[1]+'\n';
       selbox.options[selbox.options.length] = new Option(selArr2[0],selArr2[1]);
       }
      }
    }
    </SCRIPT>
    Thanks in advance, I hope this makes it easier to understand what I am trying to do!

  • #3
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>None</title>
    <script type="text/javascript">
     	
    	var categories = [];
    	categories["startList"] = ["Apparel","Books"]
    	categories["Apparel"] = ["Men","Women"];
    	categories["Books"] = ["Biography","Fiction","Nonfiction"];
    	categories["Men"] = ["Shirts","Ties","Belts"];
    	categories["Women"] = ["Blouses","Skirts","Scarves"];
    	categories["Biography"] = ["Contemporay","Historical","Other"];
    	categories["Fiction"] = ["Science","Romance"];
    	categories["Nonfiction"] = ["How-To","Travel","Cookbooks"];
    
    	var nLists = 3; // number of 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[0]['List'+i].length = 1;
    			 document.forms[0]['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(isValue){
    
    		alert(isValue);
    	}
    
    
    	function init(){
    
    		fillSelect('startList',document.forms[0]['List1'])
    	}
    
    	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    </script>
    </head>
    <body>
    	<form 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="getValue(this.value)">
    			<option selected >Make a selection</option>
    		</select>
    	</form>
    </body>
    </html>


  •  

    Posting Permissions

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