Question

我的javascript函数有问题。它在页面加载时自行运行，即使它设置为运行.onchange

我有一个看起来像这样的选择：

<select name="make_brand" id="make_brand" class="form_tag dispB width_full">
     <option value="" selected disabled>Please select</option>
     <option value="1">Audi</option>
     <option value="2">BMW</option>
     <option value="3">Mercedes-Benz</option>
</select>

我的js看起来像这样：

// defining select fields
var brand = document.getElementById("make_brand");

// get values
function getSelectedValue(element, show_mark){
     return element.options[element.selectedIndex].value;
}

// on select change
brand.onchange = getSelectedValue(brand, true);

当我刷新页面时，该功能会自动运行，我不知道为什么。谁能帮我这个？我希望函数在选择更改时运行。

Answer 1

您的代码正在运行getSelectedValue功能，然后将brand.onchange设置为其返回值。如果不需要参数，则只能以这种方式设置事件处理程序。

您有两个选项可以将参数传递给dom元素事件：

你可以像这样制作一个匿名函数：

brand.onchange = function(event){
    return getSelectedValue(event.target, true);
}

或者您可以直接将您的活动添加到您的html元素：

<select name="make_brand" onchange="getSelectedValue(this,true)" ...

Answer 2

这应该做......

<html>
<head>
<script>

function init(){
var brand = document.getElementById("make_brand");
// on select change
brand.addEventListener("change", function(){getSelectedValue(brand, true)});

}

 // get values
function getSelectedValue(element, show_mark){
     return element.options[element.selectedIndex].value;
}

</script>
</head>
<body onLoad = "init()">
<select name="make_brand" id="make_brand" class="form_tag dispB width_full">
 <option value="" selected disabled>Please select</option>
 <option value="1">Audi</option>
 <option value="2">BMW</option>
 <option value="3">Mercedes-Benz</option>
</select>
</body>
</html>

在向文档中的元素添加侦听器之前，必须先加载文档。注意body标签，我在onLoad中调用了我的init（）函数。

Answer 3

brand.onchange应该是这样的函数： brand.onchange = function(event){ getSelectedValue(brand, true); }

javascript onchange自行运行

3 个答案: