AMP网页联动下拉框实现：如何让第二个下拉框显示多选项

我来帮你搞定这个AMP动态下拉的需求！其实核心就是利用amp-bind的状态管理和动态属性绑定，把对应的JSON数组转换成独立的<option>标签就行，咱们一步步来实现：

1. 先确保引入必备的AMP组件 #

首先在页面的<head>里必须加载amp-bind和amp-form这两个扩展脚本，不然功能没法生效：

<head>
  <meta charset="utf-8">
  <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>
  <!-- 引入amp-form用于表单相关功能 -->
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <link rel="canonical" href="your-page-url.html">
</head>

2. 定义分类对应的选项数据 #

用<amp-state>标签存储我们的选项映射数据，这样amp-bind就能随时访问这些内容：

<amp-state id="categoryOptions">
  <script type="application/json">
    {
      "book": ["novel", "comic"],
      "movie": ["action", "drama"],
      "music": ["pop", "rock"]
    }
  </script>
</amp-state>

这里你可以根据自己的需求修改分类和对应的选项数组。

3. 构建下拉框并绑定动态逻辑 #

接下来就是表单部分，第一个下拉框触发状态更新，第二个下拉框根据状态动态渲染选项：

<form method="post" action-xhr="your-submit-url" target="_top">
  <!-- 第一个下拉框：选择分类 -->
  <select id="sel1" name="category" on="change:AMP.setState({selectedCategory: event.value})">
    <option value="">请选择分类</option>
    <option value="book">书籍</option>
    <option value="movie">电影</option>
    <option value="music">音乐</option>
  </select>

  <!-- 第二个下拉框：根据分类动态渲染选项 -->
  <select id="sel2" name="subcategory" 
          [options]="categoryOptions[selectedCategory]?.map(opt => '<option value=\"' + opt + '\">' + opt + '</option>').join('')">
    <!-- 默认提示选项 -->
    <option value="">请先选择分类</option>
  </select>

  <!-- 表单提交按钮（可选） -->
  <input type="submit" value="提交">
</form>

关键逻辑说明： #

• 给sel1添加on="change:AMP.setState({selectedCategory: event.value})"：当用户选择分类时，把选中的值存入AMP的状态变量selectedCategory里。
• sel2的[options]属性：用amp-bind的表达式，先从categoryOptions里取出对应分类的选项数组，然后用map把每个数组元素转换成<option>标签字符串，最后用join('')把这些字符串拼接成完整的选项HTML。
• ?.操作符是为了避免初始状态下selectedCategory为空时出现报错，起到安全访问的作用。

4. 测试效果 #

当你选择“书籍”（对应value是book）时，sel2会自动渲染出“novel”和“comic”两个独立选项；选择其他分类时，也会对应显示各自的子选项，完美解决你之前拼接成单个选项的问题！

内容的提问来源于stack exchange，提问作者Yung Fei