有条件地隐藏或显示输入 - 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>