HTML addEventListener select-onchange或onselect

Question

Looked at a few questions but did not find exact event name.

Have handle to a select box inside a frame (frame source is same domain).

Can see the inner HTML of the select but not sure how to add a onchange/ on selection change of the multi select.

 <select multiple="" size="3"><option value="12.5">12.5</option>
    <option value="12.678">12.678</option><option value="14.333">14.333</option>
    <option value="521.991">521.991</option><option value="221.976">221.976</option>      
 </select>

Above is the outer html I see for the select.

Trying to add event by

co1c.addEventListener('change',  f1s1onChange, false);

Is there an on select event? What text to use for that in addEventListener param 1?

In the iframe have :

onload="hookLoadDivInfo(this);" 

and For debug

<div id="cc">
Debug will go here</div>

All js in parent page:

 <script>


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  + "<br> <pre>" + co1 + "</pre><br>"
    x = co1.getElementsByTagName('SELECT')
    //alert('D ' + co1.innerHTML + ' c' + x.length)
    co1c = x.item(0)
    //alert('D ' + co1c.outerHTML)
    c1.innerHTML = c1.innerHTML  + "<br> <pre>" + co1c + "</pre><br>"


    window.f1s1 = co1c 
            if(p1==1){
        co1c.addEventListener('change',  f1s1onChange, false);
    }
    c1.innerHTML = c1.innerHTML  + "<br>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 < window.f1s1.size; i++){
    c1.innerHTML =  c1.innerHTML + "<br> [" + i + " " + window.f1s1.options[i].selected
  } 

}



</script>

This does not throw errors but dont see correct selected items either?

Answer 1

Was using .size instead of .length and the list was more than 3 elements and had selected bottom item so was showing as not selected

<input type=button onclick=chk() value=Both> <input type=button onclick=f1s1onChange() value=f1s1onChange>
<input type=button onclick=hookLoadDivInfo2(2) value=hookLoadDivInfo2>

<div id="cc">
For debug</div>

<script>


function chk(){
    hookLoadDivInfo2(2)
    f1s1onChange()
}

function hookLoadDivInfo(frameObj){
 //alert(2)
 window.frame1 = frameObj;
 setTimeout('hookLoadDivInfo2(1)', 2600);
    //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  + "<br> <pre>" + co1 + "</pre><br>"
    x = co1.getElementsByTagName('SELECT')
    //alert('D ' + co1.innerHTML + ' c' + x.length)
    co1c = x.item(0)
    //alert('D ' + co1c.outerHTML)
    c1.innerHTML = c1.innerHTML  + "<br> <pre>" + co1c + "</pre><br>"


    window.f1s1 = co1c 
            if(p1==1){
        co1c.addEventListener('change',  f1s1onChange, false);
    }
    c1.innerHTML = c1.innerHTML  + "<br>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 < window.f1s1.length; i++){
    c1.innerHTML =  c1.innerHTML + "<br> [" + i + " " + window.f1s1.options[i].selected + " " + window.f1s1.options[i].text
  } 

}



</script>

Answer 2

Try something like this :

 $(document).on('click keypress', 'select', function (e) {
   //do Something
 });

Or add a onClick to the select tag

Answer 3

first of all, When you are calling the check Function? You can capture the event at JQuery you must set an ID for <select>

$("select#selectmenu1").change(function() {


}

I mean with that code you can capture the event, maybe you want to save the selected option on a var or fire another function if you want get the selected value you can try

var varName= $("select#selectmenu1"); 
varName = (varName[0].value);
alert(varName);

Notice at the first line varName is an object and at the second line varName is a String