Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <form method="post" action="">
    <select size="1" id="countries">
      <option value="de">Deutschland</option>
      <option value="gb">Großbritannien</option>
      <option value="fr">Frankreich</option>
      <option value="pl">Polen</option>
      <option value="cz">Tschechien</option>
    </select>
  </form>
  <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Flag_of_Germany.svg/200px-Flag_of_Germany.svg.png" id="flag" width="200" height="100" />
</body>
</html>
 
var flags = {
  de: 'http://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Flag_of_Germany.svg/200px-Flag_of_Germany.svg.png',
  gb: 'http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Flag_of_the_United_Kingdom.svg/200px-Flag_of_the_United_Kingdom.svg.png',
  fr: 'http://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Flag_of_France.svg/200px-Flag_of_France.svg.png',
  pl: 'http://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Flag_of_Poland.svg/200px-Flag_of_Poland.svg.png',
  cz: 'http://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Flag_of_the_Czech_Republic.svg/200px-Flag_of_the_Czech_Republic.svg.png'
};
$('#countries').on('change', function (e) {
  var $this = $('option', this).eq(this.selectedIndex);
  var c = $this.prop('value');
  $('#flag').attr('src', flags[c]);
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers