JSFiddle - React, Tailwind, and code Playground

by Krzysztof Safjanowski

HTML

<div id="second" class="frame-dropdows">
  <div class="time-frame-dropdown">
    <select class="time-frame-list">
      <option value="1W" selected>1W</option>
      <option value="1M">1m</option>
    </select>
  </div>
  <div class="currency-frame-dropdown">
    <select class="currency-pair-list">
      <option value="USDEUR" selected>USDEUR</option>
      <option value="CHFPLN">CHFPLN</option>
    </select>
  </div>
</div>
<div id="first" class="frame-dropdows">
  <div class="time-frame-dropdown">
    <select class="time-frame-list">
      <option value="1D" selected>1D</option>
      <option value="1H">1h</option>
    </select>
  </div>
  <div class="currency-frame-dropdown">
    <select class="currency-pair-list">
      <option value="BTCUSD" selected>BTCUST</option>
      <option value="ETHUSD">ETHUSD</option>
    </select>
  </div>

CSS

.frame-dropdows {
  float: left;
  width: 200px;
}

JavaScript

$(options)

function options() {
  var spot = new HandleDropdown('#first')
  var forward = new HandleDropdown('#second')

  forward.on('some-fancy-event', function(event) {
    console.log('forward', event)
  })

  spot.on('some-fancy-event', function(event) {
    console.log('spot', event)
  })

  spot.dropdown('.time-frame-list').as('time')
  spot.dropdown('.currency-pair-list').as('currency')

  forward.dropdown('.time-frame-list').as('forward-time')
  forward.dropdown('.currency-pair-list').as('forward-currency')
}

function HandleDropdown(selector) {
  this.selector = selector
  this.options = {}
}

HandleDropdown.prototype.on = function(event, callback) {
  var self = this
  $(this.selector).on(event, function() {
    callback(self.options)
  })
}

HandleDropdown.prototype.dropdown = function(dropdown) {
  var self = this
  var $dropdown = $(dropdown)
  var $selector = $(self.selector)

  return {
    as: function(key) {
      self.options[key] = $dropdown.val()
      $selector.find($dropdown).change(function(event) {
        self.options[key] = this.options[event.target.selectedIndex].value
        $selector.trigger('some-fancy-event', self.options)
      })
    }
  }
}