Toggle HTML elements through <select> options

application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require_self

window.$ = window.jQuery = global.$ = require("jquery");
import "babel-polyfill";

import select from "modules/select";

$(document).ready( () => {
  new select("search");
});

layout.html

<form action="/search" method="get" class="search" id="search-form">
  <label class="search__field" for="search_type">
    <p class="search__label">Searching for</p>
    <select data-select-trigger="search" class="search__input" id="search_type" name="search_type">
      <option value="range">Range codes</option>
      <option value="country">Country</option>
      <option value="allocator">Allocator</option>
    </select>
  </label>

  <div data-select-target="search" data-select-value="range">
    <label class="search__field" for="range_from">
      <p class="search__label">From</p>
      <input class="search__input search__input--short" id="range_from" name="range_from" type="number">
    </label>
    <label class="search__field" for="range_to">
      <p class="search__label">To</p>
      <input class="search__input search__input--short" id="range_to" name="range_to" type="number">
    </label>
  </div>

  <div data-select-target="search" data-select-value="country">
    <label class="search__field" for="country">
      <p class="search__label">Country</p>
      <input class="search__input" id="country" name="country" type="text">
    </label>
  </div>

  <div data-select-target="search" data-select-value="allocator">
    <label class="search__field" for="allocator">
      <p class="search__label">Allocator</p>
      <input class="search__input" id="allocator" name="allocator" type="text">
    </label>
  </div>

  <button type="submit">Search</button>
</form>

select.js

export default class Select {
  constructor (group) {
    this.$trigger = $(`[data-select-trigger='${group}']`);
    this.$targets = $(`[data-select-target='${group}']`);

    this.$trigger.change(_ev => {
      this.open(this.$trigger.val());
    });

    this.$trigger.change();
  }

  open (value) {
    this.$targets.each((_i, target) => {
      var $target = $(target);

      if($target.data("select-value") == value) {
        $target.show();
      } else {
        $target.hide();
      }
    });
  }
}