有條件地隱藏或顯示輸入 - 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>