使用 JQuery selectBox 时地址自动填充？答案

【问题标题】：Address autofill when using JQuery selectBox?使用 JQuery selectBox 时地址自动填充？
【发布时间】：2011-09-13 18:06:53
【问题描述】：

我们的网络应用程序中有一个标准的账单表格。我正在使用 JQuery selectBox plugin 为了根据客户的请求完善输入，不幸的是，这会导致浏览器在自动填充用户地址时忽略state 下拉菜单。

在大多数情况下，插件会隐藏<select> 输入，然后在漂亮的下拉版本中来回传递值的变化。原始隐藏输入或下拉菜单都不会获取状态 auto_fill_。一旦我关闭selectBox，它就会再次工作。

如何提示浏览器更新新的下拉元素？

JS 初始化插件

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

HTML post 插件初始化：

<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>

编辑

澄清 - 我指的是默认浏览器地址 auto_fill_ 功能。这不是 Javascript 中发生的事情，或者我可以使用 selectBox 插件提供的方法来捕获和更新它。

有没有办法让浏览器默认的 auto_fill_ 动作触发 Javascript？

放弃

让自动填充与默认的 HTML 下拉菜单很好地配合是一个挑战，让它与 Jquery 插件很好地配合起来麻烦多于它的价值。我们将状态下拉列表换成了两个字符的屏蔽文本输入。感谢您的回复，对不起，我无法提供全部赏金。

【问题讨论】：

你能在这里给我们看一些代码吗？
您使用的是旧版谷歌浏览器吗？有一个错误已被修复，“状态”永远不会自动完成：code.google.com/p/chromium/issues/detail?id=43260
Chrome 是 14.0.835.186。许多浏览器的行为是一致的。
哦，浏览器“自动填充”没有更新选择框？我误解了。 AFAIK，没有办法绑定到浏览器事件以进行自动填充。祝你好运！

标签： jquery drop-down-menu autofill

【解决方案1】：

您没有提供太多关于表单的“自动完成”功能是什么的信息，但我假设在您的代码中的某个时刻，您知道您希望选择框默认处于什么状态到 - 此时，在您的状态选择上再次初始化 selectBox：

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

其中 [state index] 是您要选择的州的索引。

我从selectBox demo's page 得到这个想法，查看了源代码并检查了value-2 按钮的功能。

【讨论】：

【解决方案2】：

您将使用 selectBox API 并在应该自动完成表单其余部分的同一函数中调用它。这将使用下拉列表中的第一个值更新状态下拉列表。

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

看这里：https://github.com/claviska/jQuery-SelectBox/blob/master/index.php 从第 38 行开始。

【讨论】：