Question

聚合物1。*

有没有办法在纸张下拉列表中使用纸质项目中的文本以外的值？例如，在提交表单时，我希望50代替$50 dollars。我尝试放置value='50'，但表单仍然使用了文字$50 dollars。

    <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>

Answer 1

您可以在label中添加paper-item属性以获得所需的结果。

<paper-dropdown-menu label="minimumPrice" name="minimumPrice">
  <paper-listbox id="test" slot="dropdown-content" class="dropdown-content" selected="0">
    <paper-item label="0">No min</paper-item>
    <paper-item label="50">$50 dollars</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

value中的paper-dropdown-menu属性始终与selectedItemLabel具有相同的值，selectedItemLabel包含从当前"label"派生的值选中的项目（如果已设置），或者所选项目的修剪文本内容。

<强>更新

另一种方式：

创建隐藏的input并将所选值分配给隐藏的input值。

<paper-dropdown-menu label="minimumPrice" >
  <paper-listbox slot="dropdown-content" class="dropdown-content" selected="{{selected}}" attr-for-selected="value">
    <paper-item value="0">No min</paper-item>
    <paper-item value="50">$50 dollars</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

<input is="iron-input" name="minimumPrice" id="hiddenSelected" type="hidden" value="[[selected]]">

如果您希望默认选择第一个内容，则可以在ready函数内分配：

ready: function(){
    this.selected = 0;
}

Answer 2

可能没有正式的方法可以做到这一点，但你仍然可以在技术上完成你的目标（有点黑客）。

<paper-dropdown-menu>在其selectedItem上有一个观察者，它将其值和标签设置为the same value（从所选项目派生）;并且selectedItem由<paper-dropdown-menu>＆＃39; s event listener on iron-select设置，因此您可以添加自己的侦听器来覆盖标签。

以下是步骤：

在每个<paper-item>的{{1}}属性中指定所需的项目值。请注意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>
```

＆＃13;

ready: function() {
  // <paper-dropdown-menu id="menu">
  this.$.menu.addEventListener('iron-select', (e) => {
    const paperItem = e.detail.item;
    this.$.menu._setSelectedItemLabel(paperItem.textContent.trim());
  });
}

＆＃13;

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());
      });
    }
  });
});

＆＃13;

^codepen

Answer 3

尝试

<paper-item value="50" selected>$50 dollars</paper-item>

这将选择50美元作为默认值，并应获取值

paper-item - 为纸张下拉设置价值的方式？

3 个答案: