Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<head></head>
<body>
  <select id="region" class="select__region">
    <option value="NORTH">North</option>
    <option value="SOUTH">South</option>
    <option value="EAST">East</option>
    <option value="WEST">West</option>
  </select>
  <select id="data" class="select__data">
    <option value="NORTH">i1</option>
    <option value="NORTH">i2</option>
    <option value="SOUTH">i3</option>
    <option value="EAST">i4</option>
  </select>
</body>
 
(function () {
  var CLASSES = {
    region    : '.select__region',
    data      : '.select__data'
  },
    regionSelect = document.querySelector(CLASSES.region),
    dataSelect     = document.querySelector(CLASSES.data),
    filterData = function(val) {
      var opts = dataSelect.options;
      dataSelect.value = val;
      for(var i = 0; i < opts.length; i++) {
        if (opts[i].value === val) {
          opts[i].hidden = false;
        } else {
          opts[i].hidden = true;
        }     
      }
    };
​
​
  filterData(regionSelect.value);
​
  regionSelect.addEventListener('change', function(e) {
    filterData(this.value);
  });
  
  dataSelect.addEventListener('change', function(e) {
    console.log(this.value);
  });
​
}());
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers