有条件地隐藏或显示输入-AMP [英] Conditionally hide or show inputs - AMP

问题描述

我正在尝试使用加速移动页面(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.

我有一个<select>，用户可以在其中选择国家/地区:

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

我已经尝试使用"<option>标记内的"属性:

I have already tried using the "on" attribute inside the <option> tag:

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

，但是它不起作用，并且仅在<select>标记上有效，甚至在

but it doesn't work and it is only valid on the <select> tag even the documentation says "All elements".

我需要使用<select>和<option>标签，因为有很多国家，而不仅仅是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?

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

Hope anyone can help! Thanks!

推荐答案

您可以在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屋！