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

一次只显示一组，但所有组的值都保存在浏览器中，直到提交。当您在下拉列表中进行选择时，组中的所有输入字段都会更改以向用户显示与选择相关的值。例如，在选择字段中选择“The ACME Company”，将使 The ACME Company 的价格显示在 price 字段中，The ACME Company 的 SKU 显示在 SKU 字段中等。

  • 所有数据和所有更改都存储在客户端。保存数据时（通过 AJAX），每组的所有值同时保存到服务器。

  • 由于提交是通过 AJAX 进行的，因此所有值不一定都必须存储在输入元素中。

我可以想到两种主要方法来做到这一点：

方法一

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

方法二

每个选项都有一整套输入字段。隐藏非活动输入集。更改选择显示/隐藏正确的设置。添加新集合复制现有集合之一，将新输入元素插入 dom 并清除这些新输入元素的值。

方法三

使用 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 回答