选择带参数的 onchange 事件答案

【问题标题】：select onchange event with parameter选择带参数的 onchange 事件
【发布时间】：2015-08-17 23:27:30
【问题描述】：

我在一个循环中创建 n 个选择：

selCom = document.createElement("SELECT");
selCom.setAttribute("id", ("commessa"+n));

我想为每个更改分配一个函数：（用于禁用具有相同索引的其他选择）

selCom.setAttribute("onchange", "OnSelectionChange(this,n)");

使用 OnSelectionChange(this) 有效，OnSelectionChange(this,n) 无效

 function OnSelectionChange(select,indexDisable) {
    var selectedOption = select.options[select.selectedIndex];
        if ((selectedOption.value)=="Work"){
            document.getElementById("Attivita"+indexDisable).disabled=true;
        }else{
            document.getElementById("Attivita"+indexDisable).disabled=false;
        }
}

传递参数的正确形式是什么？

【问题讨论】：

标签： javascript select

【解决方案1】：

您可以添加事件侦听器，而不是像那样设置 html attr。

function OnSelectionChange(indexDisable) {
    var select = this;

    var selectedOption = select.options[select.selectedIndex];
    if ((selectedOption.value)=="Work"){
        document.getElementById("Attivita"+indexDisable).disabled=true;
    }else{
        document.getElementById("Attivita"+indexDisable).disabled=false;
    }
}

selCom.addEventListener('change', function(n){
    OnSelectionChange(n);
}, false);

【讨论】：

【解决方案2】：

其他方式是使用data-*属性

<div data-id="1" onclick="dataTest()">TEST!</div>

那么在JS函数中你可以通过以下方式访问id

function dataTest() {
    alert(event.target.dataset.id);
}

这里有更多关于 data-* 属性的信息more info
而且，这里是example

【讨论】：