Question

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

具有帧内选择框的句柄（帧源是同一个域）。

可以看到select的内部HTML，但不知道如何在多选的基础上添加onchange / on选择更改。

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

是否有选择活动？在addEventListener param 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>

Answer 2

尝试这样的事情：

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

或者将onClick添加到选择标记

Answer 3

首先，当您调用检查功能时？您可以在JQuery处捕获事件，您必须为<select>

设置ID

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


}

我的意思是使用该代码可以捕获事件，也许您希望将所选选项保存在var上或触发另一个函数，如果您想获得所选值，您可以尝试

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

注意第一行varName是一个对象，第二行varName是String

Html addEventListener select - onchange或onselect

3 个答案: