我有以下html:
<form id="forum_jump" action="http://www.url.com/index.php?" method="get">
<fieldset>
<select name="showforum" id="showforumJump" class="input_select">
<optgroup label="Redirect">
<option value="0">Frontpage</option>
<option value="1">Forum 1</option>
<option value="2" selected="selected"> |-- Forum 2</option>
<option value="3"> |-- Forum 3</option>
<option value="4"> |-- ...</option>
</optgroup>
</select>
<input type="submit" value="Ok" class="input_submit alt" id="forum_jump_submit">
</fieldset>
</form>
我知道我可以更改select html,告诉它在选择更改时提交表单:
<select name="showforum" id="showforumJump" class="input_select" onchange="forum_jump.submit()">
但是如何将其翻译成脚本块呢?我尝试在Chrome开发者控制台中手动运行如下所示的内容:
document.getElementById('showforumJump').addEventListener("change", forum_jump.submit(), false );
我尝试使用attachEvent,在我阅读之前,这显然只是针对IE(?)。
addEventListener以“undefined”写入控制台结束,然后立即重新提交表单并重新加载页面。我希望控制台在重新提交之前等待我更改select的值。当我尝试在网站上实现时,我还尝试将其包装在window.onload中,但它只是以无限循环结束。
我对addEventListener有什么误解,这里出了什么问题?老实说,我看不到它。
这可能是非常简单的事情,但我已经尝试和研究了一段时间,只是无法弄清楚我做错了什么。
答案 0 :(得分:3)
请考虑以下代码:
document.getElementById('showforumJump').addEventListener("change", forum_jump.submit(), false );
您正在将“change”事件绑定到forum_jump.submit()的输出。尝试将其包装在函数中,以防forum_jump.submit()依赖于此符号:
document.getElementById('showforumJump').addEventListener("change", function() { forum_jump.submit.apply(forum_jump, arguments); }, false );
如果在没有参数的情况下调用submit(),这可能对您的情况有些过分。您可以删除括号:
document.getElementById('showforumJump').addEventListener("change", forum_jump.submit, false );
apply构造是转发传递给函数的所有参数,这可能不需要。有关范围和'this'符号的解释,请参阅例如:
答案 1 :(得分:2)
forum_jump.submit()应该是without(),因为它是执行的引用,而不是执行本身:
document.getElementById('showforumJump').addEventListener("change", forum_jump.submit, false );