有条件地隐藏或显示输入 - AMP

Question

我正尝试使用加速移动页面（AMP）构建表单，并且需要根据用户选择隐藏或显示输入。

我有一个<select>，用户可以选择国家：

<select name="country" id="country" required> 
    <option value="UK">United Kingdom</option> 
    <option value="ES">Spain</option> 
</select> 

而且，如果用户选择英国我想隐藏此输入：

<input type="text" id="idcard" name="idcard"> 
<input type="text" id="mobile" name="mobile"> 

使用"on" attribute我已经尝试在<option>标签内：

<option value="UK" on="tap:idcard.hide,mobile.hide">United Kingdom</option> 

，但它不起作用，它只在<select>标记上有效，即使documentation表示“所有元素”。

我需要使用<select>和<option>标签，因为有很多国家，而不仅仅是2个，否则使用无线电输入“on”属性将起作用。

是否有任何种类的触发器或事件可以用来隐藏或显示基于用户选择的输入？

希望任何人都可以帮忙！谢谢！

Answer 1

可以将select元件上使用的change事件，并测试了所选择，并基于该值的值，设置一个AMP状态属性visibility重视show或hide这样的：

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

那么类的输入绑定到能见度值：

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

<style amp-custom> 
    .hide {display: none;} 
</style> 

您将需要包括放大器绑定组件：

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>