<script>// <![CDATA[
(function($) {

var races= [ {num:0, name:'Elves'},
             {num:1, name:'Dwarves'}];

var els = [{n:"Battering Rams",m: 24, r:0},
{n:"Boar Archers",m: 72, r:1},
{n:"Boar Riders",m: 16, r:1 },
...
];

 $(document).ready (
   function() {

    $('form[name="calc"]')
     .prepend($('<fieldset/>').append($('<legend/>').html('&nbsp;&nbsp;&nbsp;Select your race&nbsp;&nbsp;&nbsp;')))

   for (var i=0; i<races.length; i++) {
       $('form[name="calc"] fieldset:first')
     
     .append(
          $('<span/>').css('margin-right',40).html('&nbsp;&nbsp;'+races[i].name).prepend($('<input/>',{name:'selrace', type:'radio', value:races[i].num}))
         )
   } 

//------------------------------
 $('input[name="selrace"]').click ( 
  function() {
   var race = this.value;

   $('select[name="unit_type"]').empty();
   sel = document.forms.calc.unit_type;

   for (var i=0; i<els.length; i++) {
       if (els[i].r!=race)
          continue;
       var opt = new Option (els[i].n, els[i].m,  false, false);

                        try {
                           sel.add(opt, null);
                        } catch (e)
                        {
                           sel.add(opt);
                        }
 }
}).eq(0).click();

//--------------------------
$('form').submit(
   function() {
     var might = parseInt(this.unit_type.value)*parseInt(this.packsize.value)*parseInt(this.numpacks.value);


     var restab = $('#resulttable');

     if (restab.length==0) {
        $('form[name="calc"]').before($('<table/>',{id:'resulttable'}).css('background','#efe'));

       restab = $('#resulttable').get(0);
       var header = restab.createTHead();
       var row = header.insertRow();
       a= ['Troop name','Pack','Pack might','Owned','Tot. might']
       for (var i=0; i<a.length; i++ ) {
       var cell = row.insertCell();
       cell.innerHTML = a[i];
       }
     }

    restab = $('#resulttable').get(0);
    var tbody =  restab.tBodies[restab.tBodies.length-1] || restab;

    var row = tbody.insertRow();
    var cell = row.insertCell();
    cell.innerHTML = this.unit_type.options[this.unit_type.selectedIndex].text;
    cell = row.insertCell();
    cell.innerHTML = this.packsize.value;
    cell = row.insertCell();
    cell.innerHTML = parseInt(this.unit_type.value)*parseInt(this.packsize.value)

     cell = row.insertCell();
     cell.innerHTML = this.numpacks.value;
     cell = row.insertCell();
     cell.innerHTML = might;

     return false;
 })

})

})(jQuery)
// ]]></script>

<form enctype="application/x-www-urlencoded" method="post" name="calc">
<fieldset>
<p>Input Unit type &nbsp;&nbsp;&nbsp;
   <select style="width:70%" name="unit_type">
   </select></p>
<p>Pack size <input style="width:70px" name="packsize" type="number" size="4" value="0" />
Number of packs <input style="width:70px" name="numpacks" type="number" size="4" value="0" />
<input style="padding:10px" name="submit" type="submit" value="Calculate" /></p></fieldset>

</form>

might calculator

might calculator

jQuery