1

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

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

我的问题是我无法接收到第一个“选择”元素的正确值。每次调用 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>
4

1 回答 1

3

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

input1.onchange = (function(input1) {fillsource(input1.value)})(input1);
于 2013-05-18T16:07:24.210 回答