Set selected value in a paper-menu in Polymer 1.0 -
i've created custom element utilizes paper-dropdown-menu , paper-menu in order manage select box in web form. however, when trying set selected value through javascript, though value updates, element in page not show selected item in list afterwards.
i've looked @ countless examples , tried dozens of different methods. wasn't sure use attr-for-selected, tried value, name, , label far.
<dom-module is="custom-listbox"> <template> <template is="dom-repeat" items="{{dropmenus}}"> <paper-dropdown-menu id="dropdownmenu" label="type"> <paper-menu id="menu" class="dropdown-content" selected="{{selectedvalue}}" attr-for-selected="label"> <template is="dom-repeat" items="{item}}"> <paper-item{{item}}</paper-item> </template> </paper-menu> </paper-dropdown-menu> </template> </template> <script> polymer({ is: 'custom-listbox', ready: function() { var arr = ["value1", "value2", "value3"]; this.set('dropmenus', [arr]); }, properties: { selectedvalue: { type: string, value: 'value1' // selected? ...doesn't work either. }, setselected:function(selectedval) { console.log(selectedval); this.selectedvalue = selectedval; console.log(this.selectedvalue); } }); </script> </dom-module> later in app.js try set selected value so:
document.queryselector('#customlistboxid').setselected('value2'); console logs this, showing 'value2' passed element, , within element, this.selectedvalue set 'value2'. however, again, element not update in page. missing something?
value2 value2 edit
many of discussions in stack overflow regarding topic tagged polymer although isn't indicated whether discussion relates version 0.5 or 1.0, might 2 different frameworks. i'm not sure if methods i've used above maybe outdated, reason...
it seems should able use paper-menu's .select(value) function set selected value so:
this.queryselector('#menu').select(selectedval); this function documented, , confirmed exists , being imported paper-menu iron-menu-behavior. however, though throws no errors, nothing.
here working. have set 'label' attribute of 'paper-item', use <paper-item label="{{item}}">{{item}}</paper-item> instead of <paper-item{{item}}</paper-item> , fixed { mismatch in javascript.
<!doctype html> <html> <head> <title>template me</title> <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents.js"></script> <base href="http://polygit.org/components/"> <link rel="import" href="polymer/polymer.html"> <link rel="import" href="paper-menu/paper-menu.html"> <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html"> <link rel="import" href="paper-item/paper-item.html"> </head> <body class="fullbleed"> <custom-listbox id="customlistboxid"></custom-listbox> <dom-module is="custom-listbox"> <template> <template is="dom-repeat" items="{{dropmenus}}"> <paper-dropdown-menu id="dropdownmenu" label="type"> <paper-menu id="menu" class="dropdown-content" attr-for-selected="label" selected="{{selectedvalue}}"> <template is="dom-repeat" items="{{item}}"> <paper-item label="{{item}}">{{item}}</paper-item> </template> </paper-menu> </paper-dropdown-menu> </template> </template> <script> polymer({ is: 'custom-listbox', ready: function() { var arr = ["value1", "value2", "value3"]; this.set('dropmenus', [arr]); }, properties: { selectedvalue: { type: string, value: 'value1' // initial works !! } }, setselected:function(selectedval) { console.log(selectedval); this.selectedvalue = selectedval; console.log(this.selectedvalue); } }); </script> </dom-module> </body> </html>now document.queryselector('#customlistboxid').setselected('value2'); updating dropdown-menu here.
Comments
Post a Comment