如何在AMP表单中动态设置值？实现下拉框联动赋值

当然可以实现这个需求！在AMP里，我们可以借助amp-bind组件的状态管理和数据绑定能力，轻松完成“根据第一个下拉选择自动设置第二个下拉选中值”的功能。下面我给你详细拆解实现步骤和完整代码示例：

核心思路 #

1. 引入amp-bind组件：它提供了AMP.setState()状态更新和[属性]数据绑定的能力，这是实现动态交互的基础。
2. 定义状态变量：用一个状态变量来存储第二个下拉框需要选中的值。
3. 绑定第一个下拉框的change事件：当用户选择不同选项时，更新状态变量的值。
4. 绑定第二个下拉框的value属性：将下拉框的选中值与状态变量关联，状态更新时自动同步选中状态。

完整代码示例 #

1. 先引入必要的AMP脚本 #

<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- 引入amp-bind组件，用于状态管理和数据绑定 -->
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

2. 定义汽车与自行车的映射关系（可选但推荐） #

通过<amp-state>定义一个映射对象，让对应关系更清晰，方便后续维护：

<amp-state id="carBikeMapping">
  <script type="application/json">
    {
      "volvo": "bike1",
      "saab": "bike2",
      "opel": "bike3",
      "audi": "bike4"
    }
  </script>
</amp-state>

3. 两个下拉框的交互实现 #

<!-- 第一个下拉框：选择汽车 -->
<select name="cars" id="cars" on="change: AMP.setState({ selectedBike: carBikeMapping[event.value] || '' })">
  <option value="">Select cars</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

<!-- 第二个下拉框：自动同步选中对应自行车 -->
<select name="bikes" id="bikes" [value]="selectedBike">
  <option value="">Select bikes</option>
  <option value="bike1">Mountain Bike</option>
  <option value="bike2">Road Bike</option>
  <option value="bike3">Hybrid Bike</option>
  <option value="bike4">BMX Bike</option>
</select>

关键细节解释 #

• AMP.setState()：在第一个下拉框的change事件中调用这个方法，根据选中的汽车值（event.value）从映射对象里取出对应的自行车值，更新selectedBike状态变量。如果用户选择了空选项，就把selectedBike设为空字符串，还原第二个下拉框的未选中状态。
• [value]="selectedBike"：这是AMP的数据绑定语法，把第二个下拉框的value属性和selectedBike状态变量绑定。当selectedBike的值变化时，下拉框会自动选中对应value的选项。

如果你不需要复杂的映射关系，也可以直接用三元表达式在change事件里写逻辑，比如：

<select name="cars" id="cars" on="change: AMP.setState({ selectedBike: event.value === 'volvo' ? 'bike1' : event.value === 'saab' ? 'bike2' : '' })">

不过当选项较多时，用<amp-state>的映射对象会更易读和维护。

内容的提问来源于stack exchange，提问作者Susheel Singh