Question

我正在为我的网站使用bootstrap。我有一个价格表，我需要根据设备的宽度进行调整。我正在使用<div class="hidden-xs">和<div class="visible-xs">。

对于PC / Tables，我的价格表的布局基于列，您必须选择半径输入的价格。例如：

 <form>
    <div id="pricesForPC" class="hidden-xs">

Price 1------Price 2----Price 3

--Columns with description---

radius-------radius-----radius

id="price"--id="price"--id="price"

value=1------value=2----value=3

    </div> 

And for cellphones I will show it on rows:

    <div id="pricesForMobile" class="visible-xs">

Price 1 -radius button--id="price" --value=1

Price 2 -radius button--id="price" --value=2

Price 3 -radius button--id="price" --value=3

    </div> 

--Submit button--

    </form>

这可以正常工作，因为它会在您调整浏览器大小时显示并隐藏列或行中的价格。

我遇到的问题是所选价格。

如果您在“pricesForPC”中选择了价格，并且为xs尺寸调整了浏览器的大小，“pricesForMobile”表将不会显示之前选择的价格。

因此，如果我按提交，它将提交在“pricesforPC”表中选择的值，尽管“pricesForMobile”表没有选择价格。

无法检查价格值是否为空

 $('input[name="price"]:checked').val();

在“pricesforPC”上给出所选值，无论其是否隐藏。

我想避免使用php加载与浏览器宽度相对应的表单，因为我将失去页面适应性。我也无法改变半径按钮。

感谢您的帮助。

B / R

Answer 1

我最终做的是创建隐藏字段id = price。然后我将pc的价格选项Ids设置为“pricePc”，将移动设备的价格选项Ids设置为“priceMobile”。当它们中的任何一个发生变化时，我将新值设置为隐藏字段“price”，然后我更改另一个无线电选项。

例如，如果我在PC中，我只会看到pricePc的单选按钮。如果我检查pricePC = 2 ==＆gt; price = 2且priceMobile = 2.

这样，无论宽度如何，值都是相同的。

B / R

Bootstrap - 表单 - 可见性更改的半径值

1 个答案: