0

Web アプリケーションには標準の請求フォームがあります。JQuery selectBox プラグインを使用し て、クライアントの要求ごとに入力をきれいにしていますが、残念ながら、これにより、ブラウザがstateユーザーのアドレスを auto_fills_ するときにドロップダウンが無視されます。

ほとんどの場合、プラグインは<select>入力を非表示にし、プリティ ドロップダウン バージョンで発生する値の変更を前後に渡します。元の非表示の入力もドロップダウンも状態 auto_fill_ を取得しません。オフselectBoxにするとすぐに、再び機能します。

新しいドロップダウン要素を更新するためにブラウザーをどのように手がかりにしますか?

JS はプラグインを初期化します

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

HTML 投稿プラグインの初期化:

<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 プラグインで適切に機能させることは、価値があるよりも面倒でした。2 文字のマスクされたテキスト入力の状態ドロップダウンを交換しました。お返事ありがとうございます。

4

2 に答える 2

1

selectBox API を使用して、フォームの残りの部分をオートコンプリートする同じ関数でこれを呼び出します。これにより、ドロップダウンの最初の値で状態ドロップダウンが更新されます。

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

こちらをご覧ください: https://github.com/claviska/jQuery-SelectBox/blob/master/index.phpの 38 行目から。

于 2011-09-21T21:14:31.613 に答える
1

フォームの「オートコンプリート」機能全体が何であるかについてあまり多くの情報を提供していませんでしたが、コードのある時点で、選択ボックスをデフォルトにしたい状態を知っていると仮定します-その時点で、selectBox状態を初期化して再度選択します。

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

[state index] は、選択する州のインデックスです。

selectBox デモのページからこのアイデアを得て、ソースを表示し、value-2ボタンの機能を確認しました。

于 2011-09-18T05:23:22.450 に答える