我必须在 html 文件中动态创建一些“选择”元素。 而且我还打算根据值创建相同数量的“选择”元素 前者创建了“选择”元素。
因此我将有一组“选择”元素对。 当第一个“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>
最佳答案
您在创建 select 元素时捕获值，并将其硬编码到 onchange 函数中。您需要使用闭包:
input1.onchange = (function(input1) {fillsource(input1.value)})(input1);
关于javascript - 如何处理使用 javascript 动态创建的选择元素的 onchange 事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16626185/