paper-item - 为paper-dropdown设置价值的方式？

Question

聚合物 1.*

有没有办法在纸张下拉列表中放置文本以外的值？例如，当提交表单时，我想要 50 而不是 dollars。我尝试放置 value='50' 但表格仍然使用文本 dollars.

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

Answer 1

尝试

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

这将 select 默认为 50 美元，应该获取价值

Answer 2

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

<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"> dollars</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

paper-dropdown-menu 中的 value 属性将始终具有与 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"> 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 3

可能没有正式的方法可以做到这一点，但您仍然可以在技术上实现您的目标（有点破解）。

<paper-dropdown-menu> 在其 selectedItem 上有一个观察者，它将其值和标签都设置为 the same value (derived from the selected item); and the selectedItem is set by the <paper-dropdown-menu>'s 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"> dollars</paper-item>
```

为来自 <paper-dropdown-menu> 的 iron-select 事件添加侦听器，以便覆盖所选项目的显示标签。

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"> dollars</paper-item>
              <paper-item label="100">0 dollars</paper-item>
              <paper-item label="200">0 dollars</paper-item>
            </paper-listbox>
          </paper-dropdown-menu>

          <button type="submit">Submit</button>
        </form>
      </iron-form>
      
      <pre>[[response]]</pre>
    </template>
  </dom-module>
</body>

^codepen

paper-item - 为paper-dropdown设置价值的方式？

paper-item - way to place value for paper-dropdown?

polymer

polymer-1.0