diff --git a/paper-dropdown-menu.html b/paper-dropdown-menu.html
index d34221d..18b23d2 100644
--- a/paper-dropdown-menu.html
+++ b/paper-dropdown-menu.html
@@ -31,6 +31,10 @@
item is displayed in the control. If no item is selected, the `label` is
displayed instead.
+Selected items can specify a `value` attribute, which will be assigned to the
+`paper-dropdown-menu`'s' own `value` (just like it happens in native select forms).
+
+
Example:
@@ -42,7 +46,16 @@
-This example renders a dropdown menu with 4 options.
+Or, specifiing values, especially useful in forms:
+
+
+
+ United Kingdom
+ United states of America
+ Italy
+ Spain
+
+
The child element with the class `dropdown-content` is used as the dropdown
menu. This can be a [`paper-listbox`](paper-listbox), or any other or
@@ -70,7 +83,7 @@
`--paper-dropdown-menu-input` | A mixin that is applied to the internal paper input | `{}`
`--paper-dropdown-menu-icon` | A mixin that is applied to the internal icon | `{}`
-You can also use any of the `paper-input-container` and `paper-menu-button`
+You ca/n also use any of the `paper-input-container` and `paper-menu-button`
style mixins and custom properties to style the internal input and menu button
respectively.
@@ -160,8 +173,9 @@
/**
* The value for this element that will be used when submitting in
- * a form. It is read only, and will always have the same value
- * as `selectedItemLabel`.
+ * a form. It is read only, and will be equal to the 'value' attribute
+ * of the selected item, or (as a fallback) will be the same as
+ * `selectedItemLabel`.
*/
value: {
type: String,
@@ -339,21 +353,37 @@
},
/**
- * Compute the label for the dropdown given a selected item.
+ * Compute the value and the label for the dropdown given a selected item.
+ * The selected item's `value` (if available) is used as the dropdown
+ * menu's own value. As a fallback, the label is used.
*
* @param {Element} selectedItem A selected Element item, with an
* optional `label` property.
*/
_selectedItemChanged: function(selectedItem) {
var value = '';
- if (!selectedItem) {
- value = '';
- } else {
- value = selectedItem.label || selectedItem.getAttribute('label') || selectedItem.textContent.trim();
+ var labelValue = '';
+ if (selectedItem) {
+
+ // It will return a value only if parameter is either truly or ''
+ // It actually returns an object containing the passed value or null,
+ // so that chained || will work.
+ function t( p ){ if( p || p === '' ) return { v: p }; };
+
+ // Value will be either the `value` attribute, or the `value`
+ // property, or (no choice left) the `labelValue`
+ // NOTE: t() is used so that '' is considered truly
+ value = t( selectedItem.getAttribute('value') ) || t( selectedItem.value ) || t( selectedItem.label) || t( selectedItem.getAttribute('label') ) || t( selectedItem.textContent.trim() );
+ value = value.v;
+
+ // Label follows the same rules as above, minus the 'value' prop/att
+ // NOTE: t() is used so that '' is considered truly
+ labelValue = t( selectedItem.label ) || t( selectedItem.getAttribute('label') ) || t( selectedItem.textContent.trim() );
+ labelValue = labelValue.v;
}
-
this._setValue(value);
- this._setSelectedItemLabel(value);
+ this._setSelectedItemLabel(labelValue);
+ this.fire('change');
},
/**