javascript - Html addEventListener 选择 - onchange 或 onselect

Question

查看了几个问题，但没有找到确切的事件名称。

拥有框架内选择框的句柄(框架源是同一域)。

可以看到选择的内部 HTML，但不确定如何添加 onchange/多选的选择更改。

 <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>

上面是我看到的选择的外部 html。

尝试添加事件

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

有 on select 事件吗？在 addEventListener 参数 1 中使用什么文本？

在 iframe 中有:

onload="hookLoadDivInfo(this);" 

用于调试

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

父页面中的所有js:

 <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>

这不会引发错误，但也看不到正确的选定项目？

Answer 1

使用 .size 而不是 .length，并且列表超过 3 个元素，并且选择了底部项目，因此显示为未选择

<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>