[Javascript] Modifying DropDown menus

Fri Jan 4 18:00:54 CST 2002

Jon,

    Just off the top of my head (and assuming there really is an advantage
to be gained by differentiating):  couldn't you just encase your for() loop
in an if() statement?  You could even feed the "don't change" values as a
parameter to the function, perhaps in a pipe-delimited list, and then just
do a quick indexOf check to see if you need to refill the list box.  Make
sense?

Cheers,

Peter

----- Original Message -----
From: "Jon Humphrey" <myrlynne at yahoo.com>
To: <Javascript at LaTech.edu>; <1stJavaScript at yahoogroups.com>
Sent: Friday, January 04, 2002 5:25 PM
Subject: [Javascript] Modifying DropDown menus

Firstly, Happy New Year to all!

Now on to the fun stuff!

This is a different twist on the issue I mailed about last year! ;-)

I now have the dropdown's initially written by ASP. Then, when a user
selects a value of the first of three drop downs, the second ammends itself
accordingly; then when they choose from that modified second dropdown, the
third is set to specific values! I'm sure many of you have seen this type of
thing, but I will add the full code to the end of this email!

My question is this:

The drop downs are populated by a specific listing of variables  depending
on the choice of the first dropdown, but all varaibles are repeated at one
time or another, maybe more.  And the last menu choices are the same for
most of the second set of options, with only a few needing modification upon
selection.

Is there a way to not have to write the same option variables for each of
the six initial options, and can I have only the second sets of options that
would modif the third list only do just that?

Please take a look at this code and see what you think!

Thanks in advance,

Jon
<!code snippett>

<head>

<script language="JavaScript">
<!-- Begin
var f = "Fighter";
var p = "Paladin";
var r = "Ranger";
var m = "Mage";
var c = "Cleric";
var d = "Druid";
var l = "Illusionist";
var t = "Thief";
var b = "Bard";
var ft = "Fighter/Thief";
var fm = "Fighter/Mage";
var fc = "Fighter/Cleric";
var fd = "Fighter/Druid";
var fl = "Fighter/Illusionist";
var mt = "Mage/Thief";
var lc = "Illusionist/Cleric";
var lt = "Illusionist/Thief";
var dm = "Druid/Mage";
var dr = "Druid/Ranger";
var cr = "Cleric/Ranger";
var cm = "Cleric/Mage";
var fmt = "Fighter/Mage/Thief";
var fdm = "Fighter/Druid/Mage";
var fmc = "Fighter/Mage/Cleric";

var ac1 = new Array();
var aa1 = new Array();

//--human classes
ac1[1] = f; aa1[1] = 1;
ac1[2] = p; aa1[2] = 1;
ac1[3] = r; aa1[3] = 1;
ac1[4] = m; aa1[4] = 1;
ac1[5] = c; aa1[5] = 1;
ac1[6] = d; aa1[6] = 1;
ac1[7] = t; aa1[7] = 1;
ac1[8] = b; aa1[8] = 1;
ac1[9] = ft; aa1[9] = 1;
ac1[10] = fm; aa1[10] = 1;
ac1[11] = fc; aa1[11] = 1;
ac1[12] = fd; aa1[12] = 1;
ac1[13] = mt; aa1[13] = 1;
ac1[14] = cr; aa1[14] = 1;
ac1[15] = cm; aa1[15] = 1;
ac1[16] = fmt; aa1[16] = 1;
ac1[17] = fmc; aa1[17] = 1;

//--dwarf classes
ac1[20] = f; aa1[20] = 2;
ac1[21] = c; aa1[21] = 2;
ac1[22] = t; aa1[22] = 2;
ac1[23] = ft; aa1[23] = 2;
ac1[24] = fc; aa1[24] = 2;

//--elfen classes
ac1[30] = f; aa1[30] = 3;
ac1[31] = c; aa1[31] = 3;
ac1[32] = r; aa1[32] = 3;
ac1[33] = m; aa1[33] = 3;
ac1[34] = t; aa1[34] = 3;
ac1[35] = fm; aa1[35] = 3;
ac1[36] = ft; aa1[36] = 3;
ac1[37] = fmt; aa1[37] = 3;
ac1[38] = mt; aa1[38] = 3;

//--gnome classes
ac1[40] = f; aa1[40] = 4;
ac1[41] = c; aa1[41] = 4;
ac1[42] = l; aa1[42] = 4;
ac1[43] = t; aa1[43] = 4;
ac1[44] = ft; aa1[44] = 4;
ac1[45] = lc; aa1[45] = 4;

//--Half-Elf classes
ac1[50] = f; aa1[50] = 5;
ac1[51] = r; aa1[51] = 5;
ac1[52] = m; aa1[52] = 5;
ac1[53] = c; aa1[53] = 5;
ac1[54] = d; aa1[54] = 5;
ac1[55] = t; aa1[55] = 5;
ac1[56] = b; aa1[56] = 5;
ac1[57] = fc; aa1[57] = 5;
ac1[58] = cr; aa1[58] = 5;
ac1[59] = fd; aa1[59] = 5;
ac1[60] = dr; aa1[60] = 5;
ac1[61] = cm; aa1[61] = 5;
ac1[62] = dm; aa1[62] = 5;
ac1[63] = fmc; aa1[63] = 5;
ac1[64] = fdm; aa1[64] = 5;
ac1[65] = fm; aa1[65] = 5;
ac1[66] = ft; aa1[66] = 5;
ac1[67] = fmt; aa1[67] = 5;
ac1[68] = mt; aa1[68] = 5;

//-- halfling classes
ac1[70] = f; aa1[70] = 6;
ac1[71] = c; aa1[71] = 6;
ac1[72] = t; aa1[72] = 6;
ac1[73] = ft; aa1[73] = 6;

//-- alignment assignments
var lg = "Lawful Good";
var ln = "Lawful Neutral";
var le = "Lawful Evil";
var ng = "Neutral Good";
var tn = "True Neutral";
var ne = "Neutral Evil";
var cg = "Chaotic Good";
var cn = "Chaotic Neutral";
var ce = "Chaotic Evil";

var ac2 = new Array();
var aa2 = new Array();

ac2[100] = lg; aa2[100] = 1;
ac2[101] = ln; aa2[101] = 1;
ac2[102] = le; aa2[102] = 1;
ac2[103] = ng; aa2[103] = 1;
ac2[104] = tn; aa2[104] = 1;
ac2[105] = ne; aa2[105] = 1;
ac2[106] = cg; aa2[106] = 1;
ac2[107] = cn; aa2[107] = 1;
ac2[108] = ce; aa2[108] = 1;

ac2[200] = lg; aa2[200] = 2;

ac2[300] = lg; aa2[300] = 3;
ac2[301] = ng; aa2[301] = 3;
ac2[302] = cg; aa2[302] = 3;

function selectChange(control, controlToPopulate, ItemArray, GroupArray)
{
  var myEle;
  var x;
  // Empty the second drop down box of any choices
  for (var q=controlToPopulate.options.length; q>=0; q--)
controlToPopulate.options[q]=null;

  if (control.name == "secondChoice") {
    // Empty the third drop down box of any choices
    for (var q=myChoices.thirdChoice.options.length; q>=0; q--)
myChoices.thirdChoice.options[q] = null;
 }
  // ADD Default Choice - in case there are no values
  myEle = document.createElement("option") ;
  myEle.value = 0 ;
  myEle.text = "<--Please Select One-->" ;
  controlToPopulate.add(myEle) ;
  // Now loop through the array of individual items
  // Any containing the same child id are added to
  // the second dropdown box
  for ( x = 0 ; x < ItemArray.length  ; x++ )
    {
      if ( GroupArray[x] == control.value )
        {
          myEle = document.createElement("option") ;
          myEle.value = x ;
          myEle.text = ItemArray[x] ;
          controlToPopulate.add(myEle) ;
        }
    }
}
//  End -->
</script>

</head>
<body>

<form action="" name="myChoices" id="myChoices">
<table align="center">
 <tr>
  <td>
   <select name="firstChoice" id="firstChoice" onChange="selectChange(this,
myChoices.secondChoice, ac1, aa1);">
   <option value="0" selected><--Please Select One--></option>
   <option value='1'>Human</option>
   <option value='2'>Dwarf</option>
   <option value='3'>Elf</option>
   <option value='4'>Gnome</option>
   <option value='5'>Half-Elf</option>
   <option value='6'>Halfling</option>
   </select>
  </td>
 </tr>
 <tr>
  <td>
   <select name="secondChoice" id="secondChoice"
onChange="alert(this.value);selectChange(this, myChoices.thirdChoice,ac2,
aa2); "><!-- -->
   <option value="100" selected><--Please Select One--></option>
   <option value='101'>Fighter</option>
   <option value='102'>Paladin</option>
   <option value='103'>Ranger</option>
   <option value='104'>Mage</option>
   <option value='105'>Cleric</option>
   <option value='106'>Druid</option>
   <option value='107'>Thief</option>
   <option value='108'>Bard</option>
   <option value='109'>Multi-Classed</option>
   </select>
  </td>
 </tr>
 <tr>
  <td>
   <select name="thirdChoice" id="thirdChoice"
onChange="alert(this.value);">
   <option value="200" selected><--Please Select One--></option>
   <option value='201'>Lawful Good</option>
   <option value='202'>Lawful Neutral</option>
   <option value='203'>Lawful Evil</option>
   <option value='204'>Neutral Good</option>
   <option value='205'>True Neutral</option>
   <option value='206'>Neutral Evil</option>
   <option value='207'>Chaotic Good</option>
   <option value='208'>Chaotic Neutral</option>
   <option value='209'>Chaotic Evil</option>
   </select>
  </td>
 </tr>
</table>
</form>
</body>
</html>

</code snippett!>

" Art must take reality by surprise. "

Frantoise Sagan