Alexandru Alexandru - 3 months ago 18
HTML Question

Polymer 1.0 reading select value when there is an inside template(dom-repeat) in select tag

i'm having trouble with a polymer 1.0 element.
I have to print inside a select every option of a book size (A5, A4) and the extra prices for every selection(this information is from an js array returned from _returnSelItemDataArr).

The array data looks something like this:
enter image description here



_returnSelItemDataArr: [array[id, name, extra], array[id, name, extra]].





Here is a bit of source code :


<select id="sizeSelect" value="{{itm.id::change}}" aria-labelledby="sizeLabel">
<template is="dom-repeat" items="{{_returnSelItemDataArr(item, 'sizes')}}" as="itm">
<option value="{{index}}" selected$="[[_computeSelected(index, itm)]]">{{itm.name}} (+{{itm.extra}} lei)</option>
</template>
</select>


Select compute function:


_computeSelected: function(index, itm) {
return index+1===parseInt(itm.id, 10);
},




The problem is when i try to get the selection value from "#sizeSelect" by this code :
this.$.sizeSelect.value
the console output of select value is
undefined
.
Accesing the select value seems to be a problem when using polymer with dom-repeat for options.
Anyone happens to know how to access the select value properly ?
NOTE: I have to mention that 'item' is my product, it's an object that contains all the information about the product


Answer:

To select an element by id under shadow-dom you will have to use this operator
$$
. For me was something like this:
this.$$('#sizeSelect').value
.

Answer

Answer: To select an element by id under shadow-dom you will have to use this operator $$ . For me was something like this: this.$$('#sizeSelect').value.