function updateSelected() {
   // $(this) is a select
   if (!$(this).data("selected")) {
      $(this).data("selected",0);
   }
   parentList = $(this).parents("ul").eq(0);
   selected = parseInt($(this).find("option:selected").val());
   // Update the total by adding the difference between the new and previous value
   change = selected - $(this).data("selected");
   // IE doesn't deal with option disabled, so we deal with it ourselves
   if (parentList.data("total") + change + 1 > parentList.data("max"))  {
      $(this).find("option").eq($(this).data("selected")).attr("selected",true);
   } else {
      parentList.data("change",change);
      $(this).data("change",change);
      parentList.data("total",parentList.data("total")+ parentList.data("change") );
      $(this).data("selected",selected);
  }
}

function disableNonvalidOptions() {
    // $(this) is a ul.compare
    parentList = $(this);
    total = parentList.data("total");
    remaining = parentList.data("max") - 1 - total;
    change = parentList.data("change");
    initialized = parentList.data("initialized");
    parentList.find("select").each(function() {
         selected=$(this).data("selected");
         options = $(this).find("option");
         if (!initialized) {
           max = remaining + selected + 1;
           options.slice(0,max).attr("disabled",false).css("color","menutext");
           options.slice(max).attr("disabled",true).css("color","graytext");
           $(this).data("max",max);
         } else {
           newmax = $(this).data("max") - change + $(this).data("change");
           if (change > 0) {
             options.slice(Math.max(0,newmax),$(this).data("max") ).attr("disabled",true).css("color","graytext");
           } else if (change < 0 ) {
             options.slice($(this).data("max"), newmax).attr("disabled",false).css("color","menutext");
           }
           $(this).data("max",newmax);
        }
         $(this).data("change",0);
    });
    
    parentList.data("change",0);
}

function setTotalAndRemaining() {
    // $(this) is a ul.compare
    inputs = $(this).find("input");
    inputs.eq(0).val($(this).data("total"));
    inputs.eq(1).val($(this).data("max") - 1 - $(this).data("total")); 
     if ($(this).data("total") > $(this).data("max") - 1) {
        inputs.css("color","red");
     } else {
        inputs.css("color","green");
     }
}

 $(document).ready(function() {
   // Adding a line to the list with the total displayed
   $("div.cumulative ul.compare").append("<li><span class='label'>Total</span>: <input disabled='disabled' /> <span class='label'>Remaining</span> <input disabled='disabled' /></li>");
   // Initialize the fields by summing up the current values
   $("div.cumulative ul.compare").each(function() {
     parentList = $(this);
     parentList.data("initialized",false);
     // the maximum value acceptable is set in the :dim of the question
     parentList.data("max",parseInt(parentList.parent().find("input[name$=:dim]").val()));
     parentList.data("total",0);
     parentList.find("select").each(updateSelected);
     $(this).each(disableNonvalidOptions);
     $(this).each(setTotalAndRemaining);
     parentList.data("initialized",true);
   });

   // When a select is changed, update the total
   $("div.cumulative ul.compare select").change(function () {
     $(this).each(updateSelected);
     parentList = $(this).parents("ul").get(0);
     $(parentList).each(disableNonvalidOptions);
     $(parentList).each(setTotalAndRemaining);
     
   });
 });