如何处理使用 javascript 动态创建的选择元素的 onchange 事件？答案

【问题标题】：How to process onchange events for select elements which is dynamically created using javascript?如何处理使用 javascript 动态创建的选择元素的 onchange 事件？
【发布时间】：2013-05-21 03:53:43
【问题描述】：

我必须在 html 文件中动态创建一些“选择”元素。而且我还打算根据的值创建相同数量的“选择”元素前者创建了“选择”元素。

因此，我将拥有一组“选择”元素对。当第一个“选择”元素的选择值改变时，第二个“选择”元素将使用数据库中的相应记录刷新其选项。

我的问题是我无法接收到第一个“选择”元素的正确值。每次调用 onchange 事件时，传递给 onchange 函数的值（在我的例子中，它被称为“fillSource()”是更改发生之前的值，而不是更改后的选定值。

有人知道如何解决这个问题吗？

以下是我的javascript代码：

<script>

    var selectCount = 1;
    var cats = #{dropCatsJson};
    var subcats = #{dropSourceJson};
    function addNewSource() {

        var inputchange = document.createElement('select');
        inputchange.options[0] = new Option("pls Select", "0");
        inputchange.id="schange";

        var input1 = document.createElement('select');
        for( var i=0;i< cats.length;i++ ) {
            var s = cats[i];                        
            input1.options.add( new Option(s.Name, s.Id) );            
        }

        input1.id = 's' + selectCount;

        //input1.onchange = new Function("alert(\"input1 changed\")");       
        input1.onchange = new Function("fillSource(" + input1.value + ")");

        document.getElementById('newSource').appendChild(input1);
        document.getElementById('newSource').appendChild(inputchange);
        selectCount = selectCount + 1;
    } 

    function fillSource(input1)
    {

        var dropsub = document.getElementById("schange");
        dropsub.options.length = 0;//clear all the options.
        for( var i=0;i< subcats.length;i++ ) {
            var s = subcats[i];
            if( s.ParentId == input1.value ) 
            {               
                dropsub.options.add( new Option(s.Name, s.Id) );
            }
        }
    }


</script>

================================================ ================================= 最终有效的代码。请注意，您应该为新创建的添加 onchange 事件选择这样的元素：

input1.onchange = function(){fillsource(input1.value)};

这是我的 test.html 代码：

<html> 

<script type="text/javascript"> 
var selectCount = 1;
function addNewSearch() 
{ 
     //alert("add");
     var input1 = document.createElement('select');
     input1.options[0] = new Option("s1","1");
     input1.options[1] = new Option("s2","2");
     input1.name = 's' + selectCount;
     input1.id = 's' + selectCount;
     input1.onchange = function(){fillsource(input1.value)};
     document.body.appendChild(input1);

     selectCount = selectCount +1;
     //alert(selectCount);
     var selcount = document.getElementById('selCount');
     selcount.textContent = selectCount;
} 

function fillsource(ivalue)
{
     alert(ivalue);
} 

</script> 

<form name= "Search" id= "SearchForm"  method= "post"> 

<select name= "SearchWhat" onchange = "setSearchField()"> 
<option value = "both"> Both Event and Task </option> 
<option value = "event"> Event </option> 
<option value = "task" > Task </option> 
</select> 

<label id="selCount"></label>

<input type="submit" value= "submit" name = "btn_submit"/> 
<input type="button" name= "newsearch" value= "New Search" onClick= "addNewSearch()"> 
</html>

【问题讨论】：

能否提供一些dropCatsJson和dropSourceJson的测试数据？
@Barmar 解决了我的问题。还是谢谢。

标签： javascript select onchange

【解决方案1】：

您在创建 select 元素时捕获值，并将其硬编码到 onchange 函数中。您需要使用闭包：

input1.onchange = (function(input1) {fillsource(input1.value)})(input1);

【讨论】：

您的回答启发了我，有其他方法可以解决这个问题。首先，我传递第一个选择元素的 id 属性；然后我使用 document.getElementById() 在我的函数 fillsource() 中捕获值，最后当我使用 input1.value 时，它可以工作。 code input1.onchange = new Function("fillSource(\"s1\")"); var inputselect = document.getElementById(input1); code
你可以这样做，但为什么在你不需要的时候打电话给getElementById()？
感谢您的建议。我改成input1.onchange = function() {fillsource(input1.value)};
应该也可以。我错误地认为input1 是一个for循环变量，在这种情况下，需要另一个级别的闭包。