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

我已尝试使用<option>标记内的"on" attribute：

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

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

我需要使用<select>和<option>标签，因为有很多国家/地区而不仅仅是2，否则使用无线电输入＆＃34; on＆＃34;属性会起作用。

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

希望任何人都可以提供帮助！谢谢！

Answer 1

您可以在change元素上使用select事件，并测试所选的值，并根据该值将AMP状态属性visibility设置为值{{ 1}}或show喜欢这样：

hide

然后将输入类绑定到visibility的值：

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

然后你只需要CSS类：

<input type="text" id="idcard" name="idcard" 
       class="show"
       [class]="visibility||'show'">
<input type="text" id="mobile" name="mobile"
       class="show"
       [class]="visibility||'show'">

您需要包含amp-bind组件：

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

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

1 个答案: