AMP技术问题：如何满足条件时触发下拉框onChange表单提交

针对你的两个问题，我来一步步帮你解决：

一、通过状态检查控制表单提交 #

你完全可以通过AMP的条件表达式实现仅当满足要求时提交表单。AMP支持在事件动作中使用三元运算符，需要注意的是：AMP的事件链必须包含有效动作，不能直接写“无操作”，可以用空的AMP.setState({})来占位。

修改后的下拉框代码 #

<form id="foo">
  <!-- 第一个下拉框：仅当第二个下拉框已选择有效值时提交 -->
  <select name="first" on="change:AMP.setState({settings: {first: event.value}}), settings.second != '0' ? foo.submit : AMP.setState({})">
    <!-- 你的选项内容 -->
  </select>

  <!-- 第二个下拉框：仅当两个下拉框都有有效值时提交 -->
  <select name="second" on="change:AMP.setState({settings: {second: event.value}}), settings.first && settings.second != '0' ? foo.submit : AMP.setState({})">
    <option value="0">Please select</option>
    <!-- 你的选项内容 -->
  </select>
</form>

逻辑说明 #

• 第一个下拉框：检查settings.second是否不等于默认的0（即用户已选择第二个下拉框的有效选项），满足条件才执行foo.submit；否则执行空的setState（无实际操作）。
• 第二个下拉框：额外校验settings.first是否存在有效值，确保两个下拉框都完成选择后再触发提交。

二、修复下拉框的验证无效问题 #

你遇到的下拉框验证不生效，核心原因是第一个选项的value="0"被AMP视为有效选中值，导致required属性无法触发验证。我们只需调整默认选项的设置即可修复：

修改后的验证下拉框代码 #

<form id="requirements-form">
  <input type="text" id="show-first-on-submit-name" name="name" placeholder="Digit..." required 
         on="change:AMP.setState({settings: {testing: event.value}}),requirements-form.submit" 
         pattern="^([1-9][0-9]*)$">
  <span visible-when-invalid="valueMissing" validation-for="show-first-on-submit-name"></span>
  <span visible-when-invalid="patternMismatch" validation-for="show-first-on-submit-name"> Please enter not '0' </span>

  <!-- 修复后的下拉框 -->
  <select name="purpose" id="purpose" pattern="^([1-9][0-9]*)$" required 
          on="change:AMP.setState({settings: {purpose: event.value}}),requirements-form.submit">
    <!-- 将默认选项设为空值，同时添加disabled和selected -->
    <option value="" disabled selected>Please select</option>
    <option value="1">One</option>
  </select>
  <span visible-when-invalid="valueMissing" validation-for="purpose">missing</span>
  <span visible-when-invalid="patternMismatch" validation-for="purpose">wrong</span>
</form>

修复说明 #

• 将默认选项的value="0"改为value=""，并添加disabled selected：这样初始状态下，下拉框没有选中任何有效值，required属性会正确触发valueMissing验证。
• 保留pattern属性：当用户选择有效选项后，会自动校验选项的value是否符合正则^([1-9][0-9]*)$，确保值不为以0开头的无效内容。

调整后，下拉框的验证就能和输入框一样正常工作了。

内容的提问来源于stack exchange，提问作者Yurii Hierasin