[Javascript] Modifying DropDown menus

Fri Jan 4 17:25:34 CST 2002

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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20020104/b1645698/attachment.html>