Question

我有一组“堆叠”在一起的输入字段。

<!-- 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" />

一次只显示一组，但所有设置的值都保留在浏览器中，直到提交为止。在下拉列表中进行选择时，组中的所有输入字段都将更改为向用户显示与选择内容相关的值。例如，在选择字段中选择“ACME公司”将使ACME公司的价格显示在价格字段中，ACME公司的SKU显示在SKU字段中等。

所有数据和所有更改都存储在客户端。保存数据（通过AJAX）时，每组的所有值都会同时保存到服务器。
由于是通过AJAX提交的，因此所有值都不一定要存储在输入元素中。

我可以想到两种主要方法：

方法1

一组输入元素，数据存储在javascript对象中。在更改选择时，将从javascript变量中读取正确的数据并将其插入到字段中。用户对第一组所做的任何更改都将首先保存到变量中。选择添加新集将当前值保存到变量，然后清除表单中的值。

方法2

每个选项都有一整套输入字段。隐藏非活动输入集。更改选择显示/隐藏正确的设置。添加新集会复制其中一个现有集，将新输入元素插入到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，每组的值都存储在哪里？在选择选项？

Answer 1

我会使用基于JSON的数据存储并回收输入，然后提交JSON存储而不是表单数据。有很多库（你已经在使用jQuery）在客户端和服务器端都提供帮助。

处理客户端相同输入字段的多个副本的最佳实践？

1 个答案: