Multiple drop down boxes on one page

rtnMichael · Oct 27, 2003

Hey guys, I want to find the easiest way to fill in four drop down boxes, one right after another has been chosen. The way I'm doing it right now is getting to look very ugly, not to mention long, and I know there has to be a better way....Not only do each of them depend on the previous, but also the ones before them....e.g. the last drop down will be a combination of all other three drop downs. Can anyone tell me an easy way to do this? I would attach my code to show the way I'm doing it, but it's just too big...just a bunch of if's and case statements.

Thanks
Mike

byam · Oct 27, 2003

Here is an quick example I just came with.

Code:

<html>
<head>
<script language=&quot;javascript&quot;>
var choices = new Array('red', 'blue', 'yellow');

function initChoice() {
  var theFrom = document.forms['color'];
  for (var i = 0; i < choices.length; i++) {
    theFrom.choice1.options[i] = new Option(choices[i]);
    theFrom.choice1.options[i].value = choices[i];
  }
  theFrom.choice1.selectedIndex = 0;
  populateChoices(2);
}

var numChoices = 3;
function populateChoices(rank) {
  for (var i=rank; i<=numChoices; i++) {
    var options = eval(&quot;document.forms['color'].choice&quot;+i+&quot;.options&quot;);
    for (var j = 0; j < options.length; j++) {
      options[i] = null;
    }
  }
  for (var i=rank; i<=numChoices; i++) {
    var index = 0;
    var options = eval(&quot;document.forms['color'].choice&quot;+i+&quot;.options&quot;);
    for (var j = 0; j < choices.length; j++) {
      if (notSelected(choices[j], i)) {
      	options[index] = new Option(choices[j]);
      	options[index++].value = choices[j];
      }
    }
  }
}

function notSelected(choice, rank) {
  var result = true;
  for (var i=1; i<rank; i++) {
    if (eval(&quot;document.forms['color'].choice&quot;+i+&quot;.value&quot;)== choice) {
    	result = false;
    }
  }
  return result;
}

</script>
</head>

<body onload=&quot;initChoice()&quot;>
 
<form name=&quot;color&quot;>
<select name=&quot;choice1&quot; onchange=&quot;populateChoices(2)&quot;><option>--</option></select><br />
<select name=&quot;choice2&quot; onchange=&quot;populateChoices(3)&quot;/><option>--</option></select><br />
<select name=&quot;choice3&quot;/><option>--</option></select><br />
</form>

</body>

</html>

rtnMichael · Oct 28, 2003

that works pretty good...now how would I do it for....well, let me show you what I have to do:

drop down 1
option 1 -> choices are a,b,c,d,e
option 2 -> choices are a,b,c
option 3 -> choices are a,b,c,d,e,f

drop down 2
option 1a -> choices are 1,2,3
option 1b -> choices are 1,2,3,4,5
option 1c -> choices are 1,2

drop down 3
option 1a1 -> choices are x,y
option 1a2 -> choices are w,x,y,z
option 1a3 -> choices are q,s,t

and so on.....and then there's one more drop down with choices!!!!

you see where I'm going with this...once you get past the second drop down box, the choices get a little hairy and the code gets a lot longer, especially if the third drop down has plenty of choices. I know I'm confusing myself, so I hope I haven't thrown a curve ball to you. Would it just be better if I made more than one page and worked it one at a time, rather than all on one page?

byam · Oct 28, 2003

first you have to come with the rule set for the drop down dependency. then you write code to generate the drop down base on existing value of the other drop down. In the about javascipt code, populateChoices() give you an idea how to redefined options for drop down box.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Multiple drop down boxes on one page

rtnMichael

Programmer

byam

Programmer

rtnMichael

Programmer

byam

Programmer

Similar threads

Part and Inventory Search

Sponsor