polymer 1.*
有没有办法在纸张下拉列表中使用的纸张项中放置文本以外的值？例如，当提交表单时，我想要 50 而不是 $50 美元。我尝试放置 value='50'，但表单仍然使用文本 $50 美元。
<paper-dropdown-menu label="minimumPrice" name="minimumPrice">
<paper-listbox class="dropdown-content" selected="0">
<paper-item>No min</paper-item>
<paper-item>$50 dollars</paper-item>
最佳答案
可能没有官方方法可以做到这一点，但您仍然可以在技术上实现您的目标(通过一些黑客手段)。
<paper-dropdown-menu> selectedItem 上有一个观察者将其值和标签设置为 the same value (源自所选项目)；和 selectedItem由 <paper-dropdown-menu> 设置的event listener on iron-select ，这样您就可以添加自己的监听器来覆盖标签。
步骤如下:
在每个
<paper-item>上指定所需的项目值的label属性。请注意<paper-dropdown-menu>将其值设置为label所选项的内容，而是<paper-item>的文本内容仍然出现在打开的下拉菜单(即列表框)中。<paper-item label="0">No min</paper-item> <paper-item label="50">$50 dollars</paper-item>为
iron-select添加监听器事件来自<paper-dropdown-menu>以覆盖所选项目的显示标签。ready: function() { // <paper-dropdown-menu id="menu"> this.$.menu.addEventListener('iron-select', (e) => { const paperItem = e.detail.item; this.$.menu._setSelectedItemLabel(paperItem.textContent.trim()); }); }
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
_onResponse: function(e) {
const resp = e.detail.response;
this.response = JSON.stringify(resp, null, 2);
},
ready: function() {
this.$.menu.addEventListener('iron-select', (e) => {
const paperItem = e.detail.item;
this.$.menu._setSelectedItemLabel(paperItem.textContent.trim());
});
}
});
});<head>
<base href="https://polygit.org/polymer+1.10.1/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="neon-animation/web-animations.html">
<link rel="import" href="iron-form/iron-form.html">
<link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="paper-listbox/paper-listbox.html">
<link rel="import" href="paper-item/paper-item.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<iron-form id="myForm" on-iron-form-response="_onResponse">
<form action="https://httpbin.org/get">
<paper-dropdown-menu id="menu" label="Minimum Price" name="minimumPrice">
<paper-listbox slot="dropdown-content" class="dropdown-content">
<paper-item label="0">No min</paper-item>
<paper-item label="50">$50 dollars</paper-item>
<paper-item label="100">$100 dollars</paper-item>
<paper-item label="200">$200 dollars</paper-item>
</paper-listbox>
</paper-dropdown-menu>
<button type="submit">Submit</button>
</form>
</iron-form>
<pre>[[response]]</pre>
</template>
</dom-module>
</body>关于polymer - paper-item - 为 paper-dropdown 赋予值(value)的方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46516755/