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

Question

我使用标准 select 代码。在 select 上，它根据值显示另一个元素。

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

我的问题：访问者可以选择选项，然后根据select离子取消隐藏link。单击 link 后，用户转到另一个页面。点击后退按钮后，该选项仍然是 selected（没关系），但是，所有按钮都被隐藏，就好像选项 0 是 selected 一样。

我尝试在选项 0 上使用 "selected"，但在按下后退按钮后它不会保留。

感谢您的帮助。

Answer 1

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

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

您为 selectedOption 变量分配 1 的值，然后 [selected] amp-bind 属性检查该值，如果它高于 0，则设置 select 到 choose 就在它重定向的用户之前，所以当他们点击 "back" 时它处于默认状态。


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

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

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

AMP reset selected option after user hits back button

amp-html