Question

我使用javascript动态创建组合框。

这里是代码（或here !!!）：

function CreateComboBox() {

 var selectElem = document.createElement('select');  
 var optionElem0 = document.createElement('option');
 var optionElem1 = document.createElement('option');
 var optionElem2 = document.createElement('option');
 var optionElem3 = document.createElement('option');
 var optionElem4 = document.createElement('option');

 selectElem.onchange = 'myFunction()';

 optionElem0.value=10;
 optionElem0.innerHTML="10";

 optionElem1.value=15;
 optionElem1.innerHTML="15";

 optionElem2.value=20;
 optionElem2.innerHTML="20";

 optionElem3.value=25;
 optionElem3.innerHTML="25";

 optionElem4.value=50;
 optionElem4.innerHTML="50";

 selectElem.appendChild(optionElem0);
 selectElem.appendChild(optionElem1);
 selectElem.appendChild(optionElem2);
 selectElem.appendChild(optionElem3);
 selectElem.appendChild(optionElem4);

 document.getElementById('ComboArea').appendChild(selectElem); 
}

function myFunction() {alert('HELLO!');}

创建组合框后，如果我从创建的组合中选择一个元素，我想要 myFunction（） 被解雇了。但它没有用，函数 myFunction（）没有解释为什么？我做错了什么？

Answer 1

好吧，我找到了解决方案。

只需替换

selectElem.onchange = 'myFunction()';

与

selectElem.onchange = myFunction;

Answer 2

您需要为onchange属性

分配一个不是字符串'myFunction()'的函数

selectElem.onchange = myFunction;

Answer 3

使用myFunction()函数将onchange绑定到.setAttribute组合框事件

selectElem.setAttribute('onchange', 'myFunction()');

Answer 4

不要指定字符串，只需指定函数名称：

selectElem.onchange = myFunction;

你应该使用这样的函数：

function addOption(node, text, value)
{
    var option;

    option = document.createElement("option");
    option.text = text;
    option.value = value;
    node.appendChild(option);
}

然后您可以轻松添加选项：

function CreateComboBox(func)
{
    var node;

    node = document.createElement("select");
    addOption(node, "10", 10);
    addOption(node, "15", 15);
    addOption(node, "20", 20);
    addOption(node, "25", 25);
    addOption(node, "30", 30);

    node.onchange = func;

    return node;
}

document.getElementById('ComboArea').appendChild(CreateComboBox(myFunction));

我改进了许多要点。试着找到它们并在继续前进时记住它们。随着时间的推移，您将更好地理解并使用Javascript提供的功能。

Answer 5

您可能希望使用变量引用的匿名函数的概念：

var myFunction = function () {
    alert('HELLO!');
}

比按字符串传递变量名要快一点。按以下方式调用：

selectElem.onchange = myFunction;

这是因为element.onchange接受处理函数。另外，您可以将函数本身传递给onchange，非常相似：

selectElem.onchange = function () {
    alert('HELLO!');
}

但在我看来，第一种解决方案更适用于以一个额外变量为代价的重用。

另请注意，处理函数始终可以将事件本身作为参数接受：

selectElem.onchange = function (e) {
    alert(e.target.className);
}

动态创建组合框无法正常工作

5 个答案: