(function () {

  var CLASSES = {

    region    : '.select__region',

    data      : '.select__data'

  },

    map = {

      NORTH: [

        'i1',

        'i2'

      ],

      SOUTH: [

        'i3'

      ],

      EAST: [

        'i4'

      ],

      WEST: [

      ]

    },

    regionSelect = document.querySelector(CLASSES.region),

    dataSelect     = document.querySelector(CLASSES.data),

    filterData = function(val) {

      var opts = dataSelect.options,

        allowedOpts = map[val];

      dataSelect.value = allowedOpts[0];

      for(var i = 0; i < opts.length; i++) {

        if (allowedOpts.indexOf(opts[i].value) === -1) {

          opts[i].hidden = true;

        } else {

          opts[i].hidden = false;

        }     

      }

    };

​

​

  filterData(regionSelect.value);

​

  regionSelect.addEventListener('change', function(e) {

    filterData(this.value);

  });

​

}());