title: Html addEventListener select - onchange or onselect
body: <p>Looked at a few questions but did not find exact event name.</p>
  
  <p>Have handle to a select box inside a frame (frame source is same domain).</p>
  
  <p>Can see the inner HTML of the select but not sure how to add a onchange/ on selection change of the multi select.</p>
  
  <pre><code> &lt;select multiple="" size="3"&gt;&lt;option value="12.5"&gt;12.5&lt;/option&gt;
      &lt;option value="12.678"&gt;12.678&lt;/option&gt;&lt;option value="14.333"&gt;14.333&lt;/option&gt;
      &lt;option value="521.991"&gt;521.991&lt;/option&gt;&lt;option value="221.976"&gt;221.976&lt;/option&gt;      
   &lt;/select&gt;
  </code></pre>
  
  <p>Above is the outer html I see for the select.</p>
  
  <p>Trying to add event by</p>
  
  <pre><code>co1c.addEventListener('change',  f1s1onChange, false);
  </code></pre>
  
  <p>Is there an on select event? What text to use for that in addEventListener param 1?</p>
  
  <p>In the iframe have :</p>
  
  <pre><code>onload="hookLoadDivInfo(this);" 
  </code></pre>
  
  <p>and For debug</p>
  
  <pre><code>&lt;div id="cc"&gt;
  Debug will go here&lt;/div&gt;
  </code></pre>
  
  <p>All js in parent page:</p>
  
  <pre><code> &lt;script&gt;
  
  
  function chk(){
      hookLoadDivInfo2(2)
      f1s1onChange()
  }
  
  function hookLoadDivInfo(frameObj){
   //alert(2)
   window.frame1 = frameObj;
   setTimeout('hookLoadDivInfo2(1)', 1600);
      //alert(2)
  }
  function hookLoadDivInfo2(p1){
      //debugging - log
      frameObj = window.frame1
      c1 = document.getElementById("cc")
  
      c1.innerHTML = ''  + "DEBUG INFO  1 : "
      co1 = frameObj.contentWindow.document.getElementById("widgetContainer-content-pov_widget_2")
  
      co1.style.display = 'none'
  
      co1 = frameObj.contentWindow.document.getElementById("widgetContainer-content-pov_widget_1")
      c1.innerHTML = c1.innerHTML  + "&lt;br&gt; &lt;pre&gt;" + co1 + "&lt;/pre&gt;&lt;br&gt;"
      x = co1.getElementsByTagName('SELECT')
      //alert('D ' + co1.innerHTML + ' c' + x.length)
      co1c = x.item(0)
      //alert('D ' + co1c.outerHTML)
      c1.innerHTML = c1.innerHTML  + "&lt;br&gt; &lt;pre&gt;" + co1c + "&lt;/pre&gt;&lt;br&gt;"
  
  
      window.f1s1 = co1c 
              if(p1==1){
          co1c.addEventListener('change',  f1s1onChange, false);
      }
      c1.innerHTML = c1.innerHTML  + "&lt;br&gt;Done z co1c: " + window.f1s1
  
  }
  
  function f1s1onChange(){
     c1 = document.getElementById("cc")
     c1.innerHTML =  "DEBUG  6 f1s1onChange:" + window.f1s1 + " " + window.f1s1.length + " " + new Date()
  
    for( i =0; i &lt; window.f1s1.size; i++){
      c1.innerHTML =  c1.innerHTML + "&lt;br&gt; [" + i + " " + window.f1s1.options[i].selected
    } 
  
  }
  
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>This does not throw errors but dont see correct selected items either?</p>