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

Polymer 1.*

Is there a way to place a value other than the text in paper item that is used inside a paper-dropdown? For instance, when form is submitted I would like 50 instead of $50 dollars. I tried placing value='50' but the form still used the text $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>

Solution

There might be no official way to do that, but you could still technically accomplish your goal (with somewhat of a hack).

<paper-dropdown-menu> has an observer on its selectedItem that sets both its value and label to the same value (derived from the selected item); and the selectedItem is set by the <paper-dropdown-menu>'s event listener on iron-select, so you could add your own listener that overrides the label.

Here are the steps:

Specify the desired item value on each <paper-item>'s label attribute. Note the <paper-dropdown-menu> sets its value to the label of the selected item, but the text content of the <paper-item> still appears in the open dropdown menu (i.e., the listbox).
```
<paper-item label="0">No min</paper-item>
<paper-item label="50">$50 dollars</paper-item>
```

Add a listener for the iron-select event from <paper-dropdown-menu> in order to override the displayed label for the selected item.

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>

^codepen