HTML5 data tags, long polling, keyup instead of keypress (which works badly in IE), .toLowerCase(), the live variation of binding for elements created by jQuery after the page loads, wire ups for dropdowns, millisecond calculations for 50 and 15 seconds, messing with dropdown lists, and string splitting are all on exposition in this big, ugly procedural mess!

@using MvcAjax.Core
@model List<MvcAjax.Core.RegisteredDriver>
<table border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td valign="top" width="150" align="left" style="font-size: 16px; line-height: 30px;
            padding-right: 50px;">
         <div>View and reassign Vehicles for Registered Driver.</div>
         <div style="padding: 10px 0 10px 0;">Select Registered Driver by LicenseNumber.</div>
         <div>
            <select id="selector">
               <option value="nada" selected></option>
               @foreach(RegisteredDriver registeredDriver in Model)
               {
                  <option value="@registeredDriver.RegisteredDriverId"
                        data-extra='@registeredDriver.IsRequiredToWearGlasses
                        @registeredDriver.LicenseExpiration'>@registeredDriver.LicenseNumber
                        </option>
               }
            </select>
         </div>
      </td>
      <td valign="top" width="601" height="460">
         <div id="spinner" style="display: none;"></div>
         <div id="datapoints" style="display: block;"></div>
      </td>
   </tr>
</table>
@Html.Partial("Next", "Eight")
<script type="text/javascript">
   $(function () {
      setstage();
      var selectorValue = $("#selector option:selected").val();
      $('#selector').click(function () {
         if (selectorValue != $("#selector option:selected").val()) {
            selectorValue = $("#selector option:selected").val();
            setstage();
         }
      }).keyup(function (e) {
         switch (e.keyCode) {
            case 38:
               if (selectorValue != $("#selector option:selected").val()) {
                  selectorValue = $("#selector option:selected").val();
                  setstage();
               }
               break;
            case 40:
               if (selectorValue != $("#selector option:selected").val()) {
                  selectorValue = $("#selector option:selected").val();
                  setstage();
               }
               break;
            case 13:
               if (selectorValue != $("#selector option:selected").val()) {
                  selectorValue = $("#selector option:selected").val();
                  setstage();
               }
               break;
            default:
               break;
         }
      });
      $('.reassigner').live('click', function () {
         if (selectorValue != $(this).val()) {
            selectorValue = $(this).val();
            resetstagewhilereassigningvehicle($(this).val(), $(this).data('extra'));
         }
      }).live('keyup', function (e) {
         switch (e.keyCode) {
            case 38:
               if (selectorValue != $(this).val()) {
                  selectorValue = $(this).val();
                  resetstagewhilereassigningvehicle($(this).val(), $(this).data('extra'));
               }
               break;
            case 40:
               if (selectorValue != $(this).val()) {
                  selectorValue = $(this).val();
                  resetstagewhilereassigningvehicle($(this).val(), $(this).data('extra'));
               }
               break;
            case 13:
               if (selectorValue != $(this).val()) {
                  selectorValue = $(this).val();
                  resetstagewhilereassigningvehicle($(this).val(), $(this).data('extra'));
               }
               break;
            default:
               break;
         }
      });
   });
   function setstage() {
      var currentDriver = $("#selector option:selected").val();
      if (currentDriver == "nada") {
         $("#spinner").attr('style', "display: none;");
         document.getElementById("datapoints").innerHTML = "";
         $("#datapoints").attr('style', "display: block;");
      } else {
         getajaxcontent();
      }
   }
   function getajaxcontent() {
      var currentDriver = $("#selector option:selected").val();
      $("#datapoints").attr('style', "display: none;");
      document.getElementById("datapoints").innerHTML = "";
      $("#spinner").attr('style', "display: block;");
      var licenseNumber = $("#selector option:selected").text();
      var metaData = $("#selector option:selected").data('extra');
      $.ajax({
         type: "POST",
         url: '/Ajax/GetVehiclesForRegisteredDriver/' + currentDriver,
         async: true,
         cache: false,
         timeout: 50000,
         dataType: 'json',
         success: function (result) {
            var counter = 0;
            var vehicledetails = "";
            $.each(result, function (index, value) {
               vehicledetails = vehicledetails + "<div class='altout'>";
               vehicledetails = vehicledetails + "<div class='in'>License Plate</div>";
               vehicledetails = vehicledetails + "<div class='in'>Registration Expires</div>";
               vehicledetails = vehicledetails + "<div class='in'>Is Insured?</div>";
               vehicledetails = vehicledetails + "</div>";
               vehicledetails = vehicledetails + "<div class='out'>";
               vehicledetails = vehicledetails + "<div class='in'>" + value.Plate + "</div>";
               vehicledetails = vehicledetails + "<div class='in'>" + value.Date + "</div>";
               vehicledetails = vehicledetails + "<div class='in'>" + value.Bool + "</div>";
               vehicledetails = vehicledetails + "</div>";
               vehicledetails = vehicledetails + "<div class='out'>";
               vehicledetails = vehicledetails + "<div class='in'>" + value.Year + "</div>";
               vehicledetails = vehicledetails + "<div class='in'>" + value.Make + "</div>";
               vehicledetails = vehicledetails + "<div class='in'>" + value.Model + "</div>";
               vehicledetails = vehicledetails + "</div>";
               vehicledetails = vehicledetails + "<div class='datapoint'>";
               vehicledetails = vehicledetails + "<select class='reassigner' data-extra='" +
                     value.Guid + "'>";
               @foreach(RegisteredDriver registeredDriver in Model)
               {
                  <text>vehicledetails = vehicledetails + "<option
                        value='@registeredDriver.RegisteredDriverId'";
                  if ('@registeredDriver.RegisteredDriverId' == currentDriver) {
                     vehicledetails = vehicledetails + " selected";
                  }
                  vehicledetails = vehicledetails +
                        ">@registeredDriver.LicenseNumber</option>";</text>
               }
               vehicledetails = vehicledetails + "</select>";
               vehicledetails = vehicledetails + "</div>";
               counter++;
            });
            if (counter == 0) {
               vehicledetails = "<div class='altin'>...owns no Vehicles</div>";
            }
            var html = "<div class='altout'>";
            html = html + "<div class='in'>License Number</div>";
            html = html + "<div class='in'>Expiration Date</div>";
            html = html + "<div class='in'>Must Wear Glasses?</div>";
            html = html + "</div>";
            html = html + "<div class='driverspecs'>";
            html = html + "<div class='in'>" + licenseNumber + "</div>";
            html = html + "<div class='in'>" + metaData.split(' ')[1] + "</div>";
            html = html + "<div class='in'>" + metaData.split(' ')[0].toLowerCase() + "</div>";
            html = html + "</div>";
            html = html + vehicledetails;
            $('#datapoints').append(html);
            $("#spinner").attr('style', "display: none;");
            $("#datapoints").attr('style', "display: block;");
         },
         error: function (xhr, errorType, exception) {
            setTimeout(getajaxcontent(), 15000);
         }
      });
   }
   function resetstagewhilereassigningvehicle(driver, vehicle) {
      $.ajax({
         type: "POST",
         url: '/Ajax/UpdateVehicleOwner/' + vehicle + "@@" + driver,
         async: true,
         cache: false,
         timeout: 50000,
         dataType: 'json',
         success: function (result) {
            $("#selector").val(driver);
            setstage();
         },
         error: function (xhr, errorType, exception) {
            setTimeout(resetstagewhilereassigningvehicle(driver, vehicle), 15000);
         }
      });
   }
</script>