Need to access the MULTIPLE (possible) Selected Options

Question

I have constructed a "listBox" in HTML using select & option tags and for single selections all is working as expected inside the respective PolymerElement.

However, when I enable mutiple options with the Multiple=true attribute turned on then only the expected values of the top most selectIndex and value are passed to me in the option_selected() "Lifecycle" method.

I have found multiple solutions involving JQuery and JS, but nothing I have tried has worked with Dart-Polymer. (The straight JS solution I found will not successfully access variables.)

The HTML/Polymer code (inside a tag) looks like this:

    <select  multiple=true style="width:250px;" selectedIndex="{{selected}}" value="{{value}}" size="8" on-click="{{option_selected}}" on-change="{{on_change}}" >           
       <option template repeat="{{dataEle in dataAr}}" > {{dataEle}} </option>
    </select>  

The preferred solution would be Dart or Polymer-Dart.

Thanks!

Answer 1

You get the selected values this way:

@observable var values = toObservable(<String>[]);


void on_change(event, details, Element target) {
  var el = (shadowRoot.querySelector('select') as SelectElement);

  var v = <String>[];
  el.options.forEach((o) => o.selected ? v.add(o.value) : null);
  values.clear();
  values.addAll(v);
}

Just to show the selected values on the page

<template repeat="v in values">
  {{v}}
</template>