AMP 在用户点击后退按钮后重置所选选项

Question

我使用标准的选择代码。选择时，它会显示基于值的另一个元素。

<select on="change:AMP.setState({ option: event.value })">
<option value="0" >choose</option>
<option value="9">blue</option>
<option value="10">brown</option>
<option value="11">green</option>
</select>
<a on="tap:AMP.setState({ klasa: 10101 })" rel="nofollow" class="button addtocart" hidden="" [hidden]="option != 9" href="/link1">link1</a>
<a on="tap:AMP.setState({ klasa: 10101 })" rel="nofollow" class="button addtocart" hidden="" [hidden]="option != 10" href="/link2">link2</a>
<a on="tap:AMP.setState({ klasa: 10101 })" rel="nofollow" class="button addtocart" hidden="" [hidden]="option != 11" href="/link3">link3</a>

我的问题：访问者可以选择选项，然后根据选择取消隐藏链接。单击链接后，用户转到另一个页面。点击后退按钮后，该选项仍处于选中状态(没关系(，但是，所有按钮都被隐藏，就好像选择了选项 0 一样。

我尝试在选项 0 上使用"选择"，但在点击后退按钮后它没有保留。

谢谢你的帮助。

Answer 1

每当用户单击"后退"按钮时，他们都会访问一个奇怪的浏览器缓存，该缓存缓存表单元素，如输入、选择等。

若要反转它，请在用户单击链接时设置select的默认值。

您为selectedOption变量分配1的值，然后[selected]amp-bind 属性会检查该值，如果它高于0则在重定向用户之前将选择设置为choose，因此当他们点击"返回"时，它处于默认状态。

<select on="change:AMP.setState({ option: event.value })">
<option value="0" selected [selected]="selectedOption > 0 ">choose</option>
<option value="9">blue</option>
<option value="10">brown</option>
<option value="11">green</option>
</select>
<a on="tap:AMP.setState({ klasa: 10101, selectedOption: 1 })" 
rel="nofollow" 
class="button addtocart"  href="https://example.com"
hidden="" 
[hidden]="option != 9" >link1</a>
<a on="tap:AMP.setState({ klasa: 10101, selectedOption: 1 })" 
rel="nofollow" class="button addtocart" href="https://example.com"
hidden="" [hidden]="option != 10" >link2</a>
<a on="tap:AMP.setState({ klasa: 10101, selectedOption: 1 })" 
rel="nofollow" 
class="button addtocart" href="https://example.com"
hidden="" [hidden]="option != 11" >link3</a>

我只设法让它在第一个"后退"按钮上工作，所以如果用户第一次单击"后退"，选择会刷新，如果他们点击两次，它不是，但希望它会帮助你。