0

互いに「積み重ねられた」入力フィールドのセットがあります。

<!-- This controls which data set you're looking at -->
<select class="EditorInput" id="Selector" name="Selector">                        
   <option value="0">Link a new vendor</option>
   <option value="1">The ACME Company</option>
   <option value="2">Widgets Unlimited</option>
</select>

<!-- These values change based on the selection above -->
<input type="text" name="Price" />
<input type="text" name="SKU" />
<input type="text" name="Field3" />
<input type="text" name="Field4" />
<input type="text" name="Field5" />
<input type="text" name="Field6" />
<input type="text" name="Field7" />
<input type="text" name="Field8" />

一度に表示されるセットは1つだけですが、すべてのセットの値は送信されるまでブラウザに保持されます。ドロップダウンで選択を行うと、グループ内のすべての入力フィールドが変更され、選択に関連する値がユーザーに表示されます。たとえば、選択フィールドで「ACME Company」を選択すると、価格フィールドにACME Companyの価格が表示され、SKUフィールドにACMECompanyのSKUが表示されます。

  • すべてのデータとすべての変更はクライアント側に保存されます。データが（AJAXを介して）保存されると、各セットのすべての値が同時にサーバーに保存されます。

  • 送信はAJAXを介して行われるため、必ずしもすべての値を入力要素に格納する必要はありません。

これを行うには、主に2つの方法が考えられます。

方法1

javascriptオブジェクトにデータが格納されている単一の入力要素のセット。選択を変更すると、正しいデータがjavascript変数から読み取られ、フィールドに挿入されます。ユーザーが最初のセットに加えた変更は、最初に変数に保存されます。新しいセットを追加することを選択すると、現在の値が変数に保存され、フォームの値がクリアされます。

方法2

オプションごとに1セットの入力フィールドを用意します。非アクティブな入力セットを非表示にします。選択を変更すると、正しいセットが表示/非表示になります。新しいセットを追加すると、既存のセットの1つがコピーされ、新しい入力要素がDOMに挿入され、それらの新しい入力要素の値がクリアされます。

方法3

HTML 5データを使用して、次のような複数の値を保存します。

<input type="text" name="Field8" value="$7.95" data-value-vendor-1="$6.99" data-value-vendor-2="$2.65" data-value-vendor-3="$12.24"/>

次に、javascriptを使用して、値を「ストレージ」に切り替えたり、「ストレージ」から切り替えたりします。

どちらのオプションがより理にかなっていますか？それとももっと良い方法はありますか？また、方法1では、各セットの値はどこに保存されますか？選択オプションについて？

4

1 に答える 1

0

JSON ベースのデータ ストアを使用して入力をリサイクルし、フォーム データの代わりに JSON ストアを送信します。クライアント側とサーバー側の両方でこれを支援するライブラリがたくさんあります (既に jQuery を使用しています)。

于 2012-05-31T13:31:32.870 に答える