JSFiddle - React, Tailwind, and code Playground

by uiwwnw

HTML

<div class="xxx">
  <select name="a">
    <option value="1">a</option>
    <option value="2">b</option>
    <option value="3">c</option>
    <option value="4">d</option>
    <option value="5">e</option>
    <option value="6" selected>f</option>
  </select>
</div>
<div class="xxx">
  <select name="b">
    <option value="1">a</option>
    <option value="2" selected>b</option>
    <option value="3">c</option>
    <option value="4">d</option>
    <option value="5">e</option>
    <option value="6">f</option>
  </select>
</div>

JavaScript 1.7

class UiSelect {
  constructor(el) {
    const els = document.querySelectorAll(el);
    this.data = new Map();
    for (const el of els) {
      const select = el.querySelector('select');
      const options = select.querySelectorAll('option');
      let i = 0;
      const data = function*() {
        for (const option of options) {
          yield {
            selected: option.value === select.value,
            value: option.value,
            label: option.innerText,
            index: i++
          };
        }
      }();
      this.data.set(select.name, data);
    }
  }
  getData() {
  
  }
  getValue(name) {
  	this.data.get(name).next(true);
    for (const option of this.data.get(name)) {
      if (option.selected) {
          return option.value;
        }
    }
  }
  setValue(value) {
    for (const option of this.data.get(value[0])) {
      if(option.selected) {
      	 this.data.get(value[0])
      	option.selected = false;
        break;
      }
      if(!option.selected && option.value == value[1]) {
      	option.selected = true;
      }
    }
  }
}
const a = new UiSelect('.xxx');
console.log(a.getValue('a'));
console.log(a.getValue('a'));
console.log(a.getValue('a'));
console.log(a.getValue('a'));