有条件地隐藏或显示输入 - AMP [英] Conditionally hide or show inputs - AMP
问题描述
我正在尝试使用 Accelerated Mobile Pages (AMP) 构建表单,我需要根据用户选择隐藏或显示输入.
I am trying to build a form using Accelerated Mobile Pages (AMP) and I need to hide or show inputs based on user selection.
我有一个 用户可以在其中选择国家/地区:
I have a <select>
where users can choose the country:
<select name="country" id="country" required>
<option value="UK">United Kingdom</option>
<option value="ES">Spain</option>
</select>
如果用户选择英国,我想隐藏这个输入:
And if the user chooses United Kingdom I want to hide this inputs:
<input type="text" id="idcard" name="idcard">
<input type="text" id="mobile" name="mobile">
我已经尝试使用 "on 标签内的属性:
I have already tried using the "on" attribute inside the <option>
tag:
<option value="UK" on="tap:idcard.hide,mobile.hide">United Kingdom</option>
但它不起作用,它仅在 标签上有效,即使是 文档 说所有元素".
but it doesn't work and it is only valid on the <select>
tag even the documentation says "All elements".
我需要使用 和
标签,因为有很多国家,而不仅仅是 2 个,否则使用收音机输入"on" 属性会起作用.
I need to use <select>
and <option>
tags as there are a lot of countries and not just 2, otherwise with a radio input the "on" attribute would work.
是否有任何类型的触发器或事件可用于根据用户选择隐藏或显示输入?
Is there any kind of trigger or event I can use to hide or show inputs based on user selection?
希望大家帮忙!谢谢!
推荐答案
您可以在 select
元素上使用 change
事件,并测试选择的值,并根据该值,将 AMP 状态属性 visibility
设置为值 show
或 hide
,如下所示:
You can use the change
event on the select
element, and test the value that was selected, and based on that value, set an AMP state property visibility
to value show
or hide
like this:
<select name="country" id="country" required
on="change:AMP.setState({visibility: event.value=='ES'?'hide':'show'})">
<option value="UK" >UK</option>
<option value="ES" >Spain</option>
</select>
然后将输入的类绑定到可见性的值:
Then bind the class of the inputs to the value of visibility:
<input type="text" id="idcard" name="idcard"
class="show"
[class]="visibility||'show'">
<input type="text" id="mobile" name="mobile"
class="show"
[class]="visibility||'show'">
那么你只需要 CSS 类:
Then you just need CSS class:
<style amp-custom>
.hide {display: none;}
</style>
您需要包含 amp-bind 组件:
You will need to include amp-bind component:
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
这篇关于有条件地隐藏或显示输入 - AMP的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!