Amp html 带其他选项的放大器下拉列表_Amp Html_Amp Bind_Amp List

Amp html 带其他选项的放大器下拉列表

amp-html

Amp html 带其他选项的放大器下拉列表,amp-html,amp-bind,amp-list,Amp Html,Amp Bind,Amp List,我有一些选择的下拉列表，最后一个选项是“其他” 我想在用户从下拉列表中选择其他选项时显示文本字段我使用的是普通html，很抱歉我是AMP初学者，我找到了一些带有json选项的AMP列表示例，但我不知道如何实现，因为我在DrowDown中有有限的选项 <select data-type="text" id="cuisine" name="cuisine" required> <option value="german">German wine</option

我有一些选择的下拉列表，最后一个选项是“其他”

我想在用户从下拉列表中选择其他选项时显示文本字段

我使用的是普通html，很抱歉我是AMP初学者，我找到了一些带有json选项的AMP列表示例，但我不知道如何实现，因为我在DrowDown中有有限的选项

<select data-type="text" id="cuisine" name="cuisine" required>
    <option value="german">German wine</option>     
    <option value="baden">Baden cuisine</option>
    <option value="hamburg">Hamburg cuisine</option>
    <option value="others">Others</option>
<select>
<div class="form-group hide" id="other_cusone">
    <label for="other_city_p" class="active">Other :</label>
    <input type="text" id="other_c_p" name="other" placeholder="Other"> 
</div>


德国葡萄酒
巴登菜
汉堡菜
其他
其他：

感谢提供的有限选项，您不必使用放大器列表，它用于动态下拉。您可以使用amp bind来实现您的目标

代码：

<!doctype html> <html ⚡> <head> <meta charset="utf-8"> <title> AMP amp-bind </title> <script async src="https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> <link rel="canonical" href="https://ampbyexample.com/introduction/hello_world/"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-custom> </style> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> </head> <body> <select on="change:AMP.setState({ option: event.value })" data-type="text" id="cuisine" name="cuisine" required> <option value="german">German wine</option> <option value="baden">Baden cuisine</option> <option value="hamburg">Hamburg cuisine</option> <option value="others">Others</option> </select> <div hidden [hidden]="option != 'others'" class="form-group hide" id="other_cusone"> <label for="other_city_p" class="active">Other :</label> <input type="text" id="other_c_p" name="other" placeholder="Other"> </div> </body> </html>

安培绑定 body{-webkit动画：-amp start 8s steps（1，end）0s1 normal tweet；-moz动画：-amp start 8s steps（1，end）0s1 normal tweet；-ms动画：-amp start 8s steps（1，end）0s1 normal tweet}@-webkit关键帧-amp start{从{可见性：隐藏}到{可见性：可见}}@-moz关键帧-amp start{from{可见性：隐藏} 德国葡萄酒巴登菜汉堡菜其他其他：