Question

我有一个下拉列表，声明如下：

<select class="ddl" onchange="reloadValues(this)">
options... 
</select>

还有另一个相同的下拉列表

<select class="ddl" onchange="reloadValues(this)">
options... 
</select>

当我更改第一个下拉列表时，会触发reloadValues函数。我怎样才能触发第二个下拉列表的reloadValues。

Answer 1

如果你使用jquery，你可以这样做

$(document).ready(function() {
    $(".ddl").change(function(ev) {
        var that = this;
        reloadValues(that);
        $(".ddl").each(function(item, index) {
             if(this !== that)
                 reloadValues(this);
        });

    });

});

Answer 2

没有jquery

function reloadValues(that)
{
    var ddl=document.getElementsByTagName('select')
    for(i=0;i<ddl.length;i++)
    {
        if(ddl[i].className=='ddl')
        {
            if(that==ddl[i])
            {
                alert("This element triggered the event and contains "+ddl[i].length+" items!");
            }
            else
            {    
               // Do something
               alert("This element didn't trigger the event and contains "+ddl[i].length+" items!");
            }
        }
    }        
}

Here是一个小提琴。

Answer 3

遗憾的是，您无法比较实际函数，因为onevent函数对于每个元素都是唯一的。

看起来像

function onchange()
{
reloadValues(this)
}

如果我们可以循环遍历所有选择并比较每个元素reloadValues唯一函数内的onchange函数来查看它是否是相同的函数，那将会非常优雅。

但是会为每个元素分配一个单独的函数，因此无法直接比较它们。您可以将字符串值与element1.onchange+'' == element2.onchange+''进行比较，但在某些浏览器中可能会出现意外结果，因为它们有时会以不同方式格式化字符串值。

这是一个通过检查属性的字符串值来工作的示例。例如。它对值reloadValues(this)设置为onchange属性的所有元素执行相同的例程。

在此示例中，更改一个选择的索引会将页面上的任何选择更改为相同的索引，只要它的reloadValues(this)属性中具有onchange文本即可。在此示例中，选择的id或class属性无关紧要。

但是，标记或更改onchange属性的文本值会影响它。

<!DOCTYPE html>

<html>
<head>
<title>test</title>

<script language="javascript" type="text/javascript">

function reloadValues( XXX ) {  

    var allSelects = document.body.getElementsByTagName("select");

    for( var i = 0; i < allSelects.length; i++) {
        if(allSelects[i].attributes["onchange"].value == "reloadValues(this)") {
            allSelects[i].selectedIndex = XXX.options.selectedIndex;
        }
    }   

}


</script>


<body>

<select class="ddl" onchange="reloadValues(this)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select class="fsfsfs" onchange="reloadValues(this)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select class="ddl" onchange="reloadValues(this)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select class="ddl" onchange="reloadValues(this)">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

</body>

</html>

动态调用SELECT上的更改

3 个答案: