安培表单选择如何获取数据属性值？

Question

你好！

我在用安培绑定法。在AMP表单中，我跟踪选择的事件更改。接下来，我将更改页面元素的值。

这一切都很好，例如：

​

<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

<form method="post" action-xhr="#">
  <select name="items-select" on="change:AMP.setState({item: event.value})">
    <option value="Milk">Milk</option>
    <option value="Chocolate">Chocolate</option>
    <option value="Cookies">Cookies</option>
  </select>
</form>

<p [text]="'Field Value: ' + item">Field Value: secret</p>

​

我的问题涉及以下几个方面:如何读取数据属性的值？

例如，在这里：

<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

<form method="post" action-xhr="#">
  <select name="items-select" on="change:AMP.setState({item: event.value})">
    <option data-id="1" data-name="item-4453" data-discount="0" value="Milk">Milk</option>
    <option data-id="2" data-name="item-4454" data-discount="1" value="Chocolate">Chocolate</option>
    <option data-id="3" data-name="item-4455" data-discount="1" value="Cookies">Cookies</option>
  </select>
</form>

如何获得选定项的所有数据的值？

谢谢!

Answer 1

​

        <script async src="https://cdn.ampproject.org/v0.js"></script>
        <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
        <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
        
        <form method="post" action-xhr="#">
          <select name="items-select" on="change:AMP.setState({item: event.value})">
            <option value="1,Milk">Milk</option>
            <option value="2,Chocolate">Chocolate</option>
            <option value="3,Cookies">Cookies</option>
          </select>
        </form>
        
        <p [text]="'Field Value: ' + item.split(',')[0] + ' Field Name: ' + item.split(',')[1]">Field Value: 1 Field Name: Milk</p>

​

编辑:事实证明，您需要做的事情比使用<amp-selector>要简单得多。目前，无法从多个属性设置数据。但是，可以使用逗号,或分号;分隔字符串(以适合您的方式)。