開発

AMPページでセレクトフォームの多段階条件分岐フォームを作成する方法

作成日： 2021年1月16日

（正式名称がわからないのです）親階層のセレクトフォームを選択したら、それに合わせて子階層のセレクトフォームのオプションが切り替わる、という方法をAMPページで実装する方法です。覚書です、

ポイント

amp-bindを使います。
親階層毎にoptgroupで囲っておきます。
親階層の選択値に合わせてoptgroupを非表示にします。

コード

HTML

<!doctype html>
<html ⚡ lang="en">
	<head>
      <meta charset="utf-8">
      <title>amp-bind</title>
      <link rel="canonical" href="https://amp.dev/documentation/examples/components/amp-bind/index.html">
      <meta name="viewport" content="width=device-width">
      <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>
      <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>
      <div>
        <select on="change:AMP.setState({ option: event.value })">
          <option value="0">No selection</option>
          <option value="a">Option 1</option>
          <option value="b">Option 2</option>
          <option value="c">Option 3</option>
        </select>
        <select on="change:AMP.setState({ child: event.value })">
          <option value=" ">No selection</option>
          <optgroup label="Option 1" hidden [hidden]="option != 'a'">
          	<option value="1-1">1-1</option>
            <option value="1-2">1-2</option>            
          </optgroup>
          <optgroup label="Option 2" hidden [hidden]="option != 'b'">
          	<option value="2-1">2-1</option>
            <option value="2-2">2-2</option>            
          </optgroup>
          <optgroup label="Option 3" hidden [hidden]="option != 'c'">
          	<option value="3-1">3-1</option>
            <option value="3-2">3-2</option>            
          </optgroup>
        </select>
        <select>
          <option value=" ">No selection</option>
          <optgroup label="Option 1-1" hidden [hidden]="child != '1-1'">
          	<option value="1-1-1">1-1-1</option>
            <option value="1-1-2">1-1-2</option>            
          </optgroup>
          <optgroup label="Option 1-2" hidden [hidden]="child != '1-2'">
          	<option value="1-2-1">1-2-1</option>
            <option value="1-2-2">1-2-2</option>            
          </optgroup>
          <optgroup label="Option 2-1" hidden [hidden]="child != '2-1'">
          	<option value="2-1-1">2-1-1</option>
            <option value="2-1-2">2-1-2</option>            
          </optgroup>
          <optgroup label="Option 2-2" hidden [hidden]="child != '2-2'">
          	<option value="2-2-1">2-2-1</option>
            <option value="2-2-2">2-2-2</option>            
          </optgroup>
          <optgroup label="Option 3-1" hidden [hidden]="child != '3-1'">
          	<option value="3-1-1">3-1-1</option>
            <option value="3-1-2">3-1-2</option>            
          </optgroup>
          <optgroup label="Option 3-2" hidden [hidden]="child != '3-2'">
          	<option value="3-2-1">3-2-1</option>
            <option value="3-2-2">3-2-2</option>            
          </optgroup>
        </select>
      </div>
	</body>
</html>