Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
                  <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }  
</style>
</head>
<body>
  <p id="hello">Hello World</p>
  <select id="select_id">
    <option>Option 1</option>
    <option selected="selected">Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
    <option>Option 6</option>
    <option>Option 7</option>
    <option>Option 8</option>
    <option>Option 9</option>
  </select>
</body>
</html>
 
var sel = document.getElementById('select_id');
sel.addEventListener('click', function(el){
    var options = this.children;
    for(var i=0; i < this.childElementCount; i++){
        options[i].style.color = 'green';
    }
    var selected = this.children[this.selectedIndex];
        selected.style.color = 'red';
    }, false);
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers