gpt4 book ai didi

amp-html - 带有其他选项的放大器下拉菜单

转载 作者:行者123 更新时间:2023-12-02 09:12:11 24 4
gpt4 key购买 nike

我下拉了一些选择,其中最后一个选项是“其他”。

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

我正在使用普通的html,抱歉我是AMP初学者,我找到了一些带有json选项的amp-list示例,但我不知道如何实现,因为我在drowpdown中的选项有限。

<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-list,它用于动态下拉列表。您可以通过使用amp-bind来实现您的目标。

Here is working url

代码:

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

关于amp-html - 带有其他选项的放大器下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50885950/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com