HTML addEventListener select-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);

有選擇事件嗎？ 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>

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