我有一个带有各种 URL 的选择表单元素，我想在选择时在新窗口中打开 - 为此，我在元素的 onchange 事件中添加了以下代码：
window.open(this.options[this.selectedIndex].value,'_blank');
这个效果很好。但我也想在更改此选择元素值时提交表单 - 我尝试了各种方法，但我似乎无法让它工作。
我有 jQuery，所以如果通过它更容易实现那就很好。
更新 - 我刚刚意识到上面还有另一个问题，因为某些 URL 实际上用于生成和输出 pdf，而这些不起作用 - 它们打开然后立即关闭（至少在 IE7 中） .*
更新 07/05/09 - 我真的需要想出一个可行的解决方案。我最初确实通过显示链接而不是表单选择元素来解决这个问题，但这不再可行。
我需要上述内容的原因是我有大量可能需要查看/打印的文件，太多而无法合理地显示为链接列表。我需要提交表单来记录特定文件已被查看/打印的事实，然后在表单上显示文件历史记录的日志 - 我很乐意实现这方面的事情，因此不需要那里的帮助，但我认为这有助于放置上下文。
因此，为了澄清我的要求 - 我需要一个表单选择元素和“查看”按钮，单击该按钮不仅会在新窗口中启动文件下载（请注意当这些文件是 PDF 时我遇到的上述问题），而且还会提交包含 select 元素的表单。
给你
<script type="text/javascript">
$(function() {
$("#selectElement").change(function() {
if ($(this).val()) {
window.open($(this).val(), '_blank');
$("#formElement").submit();
}
});
// just to be sure that it is submitting, remove this code
$("#formElement").submit(function() {
alert('submitting ... ');
});
});
</script>
<form id="formElement" method="get" action="#">
<select id="selectElement">
<option></option>
<option value="http://www.deviantnation.com/">View Site 1</option>
<option value="http://stackoverflow.com/">View Site 2</option>
<option value="http://serverfault.com/">View Site 3</option>
</select>
</form>
您可以使用
this.form.submit()<script language="javascript">
function myChangeHandler() {
window.open(this.options[this.selectedIndex].value, '_blank');
this.form.submit();
}
</script>
<select onchange="myChangeHandler.apply(this)">
...
</select>
刚刚测试了 Aron 的示例，它工作正常，所以我建议您收到的错误来自 onchange 事件之外的代码。尝试下面的工作示例，看看您是否遇到相同的错误。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Example onchange and submit </TITLE>
<script language="javascript">
function myChangeHandler()
{
window.open(this.options[this.selectedIndex].value, '_blank');
this.form.submit();
}
</script>
</HEAD>
<BODY>
<form id="myform1" action="test.html">
<select onchange="myChangeHandler.apply(this)">
<option>Please select....</option>
<option value="http://stackoverflow.com">Stackoverflow</option>
<option value="http://twitter.com">Twitter</option>
</select>
</form>
</BODY>
</HTML>
根据您的描述，您的标记可能如下所示：
<form ...>
<input name="submit" ...>
...
</form>
因为浏览器传统是将输入名称添加到表单元素的对象（作为属性），所以输入中的“提交”属性掩盖了表单固有的“提交”属性或方法。您可以通过重命名（即使是暂时的）输入元素来纠正此问题（假设只有一个）：
form_object.elements['submit'].name = 'notsubmit';
form_object.submit();
如果有多个 - 例如，由于某种原因一系列名为“submit”的单选按钮 - 那么 .elements['submit'] 应该是一个元素集合，它就像一个数组，您可以对其进行循环做同样的事情。
您知道可以为表单设置目标属性吗？
<form target="_blank" method="post">
<select onchange="load()">
...
</select>
</form>
<script>
load() {
document.forms[0].action = this.value;
document.forms[0].submit();
}
</script>
请原谅可能很糟糕的 Javascript。 这些天我倾向于使用更多的 jQuery，所以我对普通的 Javascript 感到生疏。 但你已经了解了总体思路。
虽然我不熟悉 jQuery，但你应该能够做这样的事情（原型风格）：
$('select-field').observe('change',function(event){
window.open(this.options[this.selectedIndex].value,'_blank');
this.form.submit();
}
虽然我之前在使用 Javascript 提交表单时遇到了一些奇怪的问题，所以如果这不起作用，您可以尝试在表单的提交按钮上调用
click()fireEvent('click')$('submit-button').fireEvent('click');