paper-dropdown-menu / paper-listbox : 如何获取请求中的值
paper-dropdown-menu / paper-listbox : how to get the value in the request
我在 paper-dropdown-menu 中有 paper-listbox 元素,项目的值与标签不同。
这是例子
<paper-dropdown-menu label="Gender" name="gender" required error-message="Gender is required">
<paper-listbox slot="dropdown-content" attr-or-property-name="value">
<paper-item value="M">Male</paper-item>
<paper-item value="F">Female</paper-item>
</paper-listbox>
</paper-dropdown-menu>
但在post中,给出的是标签而不是项目的值
想在请求中包含 gender=M
或 gender=F
吗?
这是可能的,尽管您必须向 paper-listbox
添加一个 id
属性并挖掘一点:
<dom-module id="item-value-demo">
<template>
<style></style>
<paper-dropdown-menu label="Gender" name="gender" required error-message="Gender is required">
<paper-listbox id="gender" slot="dropdown-content" attr-or-property-name="value">
<paper-item value="M">Male</paper-item>
<paper-item value="F">Female</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</template>
<script>
class ItemValueDemo extends Polymer.Element {
static get is() { return 'item-value-demo'; }
ready() {
super.ready();
this.$.gender.addEventListener('selected-item-changed', e => { this._genderOption(e) });
}
_genderOption(e) {
const value = e.target.selectedItem;
if (value) {
console.log(value.attributes["value"].value);
}
}
}
customElements.define(ItemValueDemo.is, ItemValueDemo);
</script>
</dom-module>
<item-value-demo></item-value-demo>
参见this pen。
我在 paper-dropdown-menu 中有 paper-listbox 元素,项目的值与标签不同。 这是例子
<paper-dropdown-menu label="Gender" name="gender" required error-message="Gender is required">
<paper-listbox slot="dropdown-content" attr-or-property-name="value">
<paper-item value="M">Male</paper-item>
<paper-item value="F">Female</paper-item>
</paper-listbox>
</paper-dropdown-menu>
但在post中,给出的是标签而不是项目的值
想在请求中包含 gender=M
或 gender=F
吗?
这是可能的,尽管您必须向 paper-listbox
添加一个 id
属性并挖掘一点:
<dom-module id="item-value-demo">
<template>
<style></style>
<paper-dropdown-menu label="Gender" name="gender" required error-message="Gender is required">
<paper-listbox id="gender" slot="dropdown-content" attr-or-property-name="value">
<paper-item value="M">Male</paper-item>
<paper-item value="F">Female</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</template>
<script>
class ItemValueDemo extends Polymer.Element {
static get is() { return 'item-value-demo'; }
ready() {
super.ready();
this.$.gender.addEventListener('selected-item-changed', e => { this._genderOption(e) });
}
_genderOption(e) {
const value = e.target.selectedItem;
if (value) {
console.log(value.attributes["value"].value);
}
}
}
customElements.define(ItemValueDemo.is, ItemValueDemo);
</script>
</dom-module>
<item-value-demo></item-value-demo>
参见this pen。