[英]AMP form select How to get the value of the data attribute?
你好!
我正在使用amp-bind方法。 在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>
如何獲取所選項目的所有數據的值?
謝謝!
<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>
簡單得多。 目前,沒有可能的方法來設置多個屬性的數據。 但是,可以使用逗號,
或者分號;
帶分隔符的字符串(適合你)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.