Address autofill when using JQuery selectBox?

We have a standard billing form in our web application. I'm using the JQuery selectBox plugin to pretty up the inputs per the client's request, unfortunately this causes the browser to ignore the state dropdown when it auto_fills_ the user'开发者_StackOverflow中文版s address.

In most cases the plugin hides the <select> input, and then passes changes in value back and forth as they happen in the pretty dropdown version. Neither the original hidden input or the dropdown pick up the state auto_fill_. As soon as I turn off selectBox it works again.

How do I clue the browser in to update the new dropdown element?

JS initializes the plugin

$(function() {
  $(".WhiteDD").selectBox();
}

HTML post plugin initialization:

<div class="FormBlock">
  <label class="FormLabel" for="city">City</label>
  <input class="BillingInput required" id="city" name="transaction[billing][locality]" type="text" value="">
</div>

<div class="FormBlock">
  <label class="FormLabel" for="state">State</label>
    <select name="transaction[billing][region]" class="WhiteDD selectBox" id="state" style="display:none">
      <option value="AL" selected="selected">AL</option>
      ...
      <option value="WY">WY</option>
    </select>

    <!-- This code is injected by the selectbox plugin-->
    <a class="selectBox WhiteDD selectBox-dropdown" title="" tabindex="0"><span class="selectBox-label">AL</span><span class="selectBox-arrow"></span></a>
    <!-- End injection -->

</div>

Edit

Clarification- I'm referring to the default browser address auto_fill_ functionality. This isn't something that's happening in Javascript or I could use the methods provided by the selectBox plugin to catch and update it.

Is there a way to cause the default browser auto_fill_ action to trigger Javascript?

Gave Up

Making auto-fill play nicely with default HTML dropdowns is a challenge, making it play nicely with a Jquery plugin was more trouble than it was worth. We swapped out the state dropdown for a two character masked text input. Thanks for the responses, sorry I couldn't give out the full bounty.

---

You didn't provide too much information about what the whole "autocomplete" feature of your form is, but I'm going to assume that at some point in your code you know what state you want to have the select box defaulted to - at that point, initialize selectBox on your state select again:

$("#state").selectBox("value", [state index]);

Where [state index] is the index of the state you want selected.

I got this idea from the selectBox demo's page, viewed the source and checked out the functionality of the value-2 button.

---

You'd use the selectBox API and call this in the same function that should autocomplete the rest of the form. This would update the state dropdown with the first value in the dropdown.

$(".WhiteDD").selectBox('value', 1);

Take a look here: https://github.com/claviska/jQuery-SelectBox/blob/master/index.php starting at line 38.