JSFiddle - React, Tailwind, and code Playground

HTML

<select id="box_1">
    <option value="-1">-- NO SELECTION --</option>
    <option value="0">Option 1</option>
    <option value="1">Option 2</option>
    <option value="2">Option 3</option>
</select>

<br/>


<br/>
1
<div id="results1" class="results" style="display: none">
1
</div>
<div id="results2" class="results" style="display: none">
2
</div>
<div id="results0" class="results" style="display: none">
0
</div>
2

CSS

select {
    margin: 10px;
}
div.results {
    margin: 0 auto;
    padding: 10px;
    border: 1px solid #aaa;
}

JavaScript

document.observe('dom:loaded', function() {
    var select = $('box_1'),
        button_1 = $('change_via_ajax'), 
        button_2 = $('change_via_script'), 
        results = $('results');
        
    // create observer on our select
    select.observe('change', function(e) {
    	var x = document.getElementById("results"+this.value);
    	x.style.display = "block";
      console.log("Hello world!"); 
     //   var d = new Date()
     //       t = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
     //   results.insert(new Element('div')
     //          .update(t + ' - Change was fired, value is now [' + this.value + ']'));
    });

});