Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <select name="select1" id="select1">
    <option value="foo" selected>foo</option>
    <option value="bar">bar</option>
    <option value="baz">baz</option>
  </select>
  
  <select name="select2" id="select2">
    <option value="foo1" class="foo" selected>foo1</option>
    <option value="foo2" class="foo">foo2</option>
    <option value="foo3" class="foo">foo3</option>
    
    <option value="bar1" class="bar">bar1</option>
    <option value="bar2" class="bar">bar2</option>
    <option value="bar3" class="bar">bar3</option>
    
    <option value="baz1" class="baz">baz1</option>
    <option value="baz2" class="baz">baz2</option>
    <option value="baz3" class="baz">baz3</option>
  </select>
  
</body>
</html>
 
#select2 option {
  display: none
}
#select2 .foo {
  display: block
}
 
// on attribue les variables dont on aura besoin
var select1 = document.getElementById('select1')
var select2 = document.getElementById('select2')
// à chaque fois que l'on selectionne une autre entrée dans select1
select1.addEventListener('change', function () {
  // on boucle sur les options du 2eme select
  for (var i = 0; i < select2.options.length; i++) {
    var el = select2.options[i]
    
    // si l'option a la bonne classe (l'option selectionné dans le 1er select)
    if (el.className === select1.value) {
      // on l'affiche
      el.style.display = 'block'
    } else {
      // sinon on le cache
      el.style.display = 'none'
    }
  }
  
  // là, on selectionne la 1ere option visible dans le 2nd select
  for (i = 0; i < select2.options.length; i++) {
    if (select2.options[i].style.display === 'block') {
      select2.selectedIndex = i
      break
    }
  }
})
Output

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

Dismiss x
public
Bin info
tlebpro
0viewers