可以在放大器中选择列表触发表单中第二个选择列表的更改吗?

时间:2017-10-24 15:39:19

标签: amp-html

是否可以有两个选择列表,并使第二个选项取决于第一个

的值

2 个答案:

答案 0 :(得分:0)

尝试使用amp-list中的替换功能,该功能允许在字符串内使用变量,并使用取决于用户操作的相应实际值替换。

请参阅Substitutions Guide了解详情。

答案 1 :(得分:0)

这是可能的。用于在第一个选择输入上更改AMP.setState以在第二个选择输入的选项上设置[text]的值。这是一个简化的例子:

  <form method="GET"
  class="p2"
  action="/"
  target="_top">
    <div class="ampstart-input form-elem">
      <label for="sel1" class="form-label">Select1</label>
        <select name="sel1"
          id="sel1"
          on="change:AMP.setState({jsonData: {key : event.value}})">
          <option value="a">example 1</option>
          <option value="b">example 2</option>
          <option value="c">example 3</option>
          <option value="d">example 4</option>
        </select>
      </div>
      <div class="ampstart-input form-elem">
        <label for="sel2" class="form-label">Select2</label>
        <select name="sel2"
          id="sel2">
          <option [text]="jsonData[(jsonData.key + '1')]">a example</option>

        </select>
      </div>
    <amp-state id="jsonData">
      <script type="application/json">
        {"key" : "",
         "a1":"a1 example",
         "a2":"a2 example",
         "b1":"b1 example",
         "b2":"b2 example",
         "c1":"c1 example",
         "c2":"c2 example",
         "d1":"d1 example",
         "d2":"d2 example"}
      </script>
    </amp-state>  
  </form>  

你必须找出amp-state json的逻辑来满足你的特定需求。