[SOLVED] How to Select Dropdown by Value dom-repeat Dropdown

How to Select Dropdown by Value dom-repeat Dropdown

I am trying to load back in dropdown settings after a page refresh in Polymer. The dropdown loads dynamically from an AJAX call, and once the dropdown in set it is saved in localStorage.

  <select id="customer" on-change="selectCustomer">
    <option value="" selected disabled>Select Customer</option>
    <template is="dom-repeat" items="[[customers]]" as="customer" index-as="index">
      <option value="[[customer]]">[[customer]]</option>
    </template>
  </select>

...

selectCustomer() {
  localStroage.setItem("customerName", this.$.customer.value = index;" 
)

I have tried

setDropdown() {
  // index generated in text matching for loop
  this.$.customer.selectedIndex = index; 
)

and

setDropdown() {
  // customerName generated in text matching for loop
  this.$.customer.value = customerName;
)

Solution

I believe a better way would be binding your dropdown value to the attribute customer then observe the value of customer and save it to the local storage ... sync it on connectedCallback a demo is always the best way to explain ...