如何使 Web 表单在下拉选择中自动提交答案

【问题标题】：How to make a web form submit itself automatically up on a dropdown selection如何使 Web 表单在下拉选择中自动提交
【发布时间】：2011-03-17 16:02:17
【问题描述】：

我的页面中有一个如下表所示的表单；

<form name="testform" id="testform" action="test.php" method="get">
  <input name="field1" id="field1" type="text" value="">
  <input name="field2" id="field2" type="text" value="">
  <select name="dropdown" id="dropdown">
    <option value="option1" selected="selected">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
  </select>
  <input type="submit" name="Submit" value="Submit" id="Submit">
</form>

我希望当用户从下拉菜单中选择一个选项时自动提交表单。使用或不使用 JavaScript（使用或不使用 jQuery）如何做到这一点？

提前谢谢...:)

爆破

【问题讨论】：

标签： javascript jquery webforms form-submit

【解决方案1】：

单击（或选择）？在这种情况下，用户将无法进行任何选择。您可能的意思是一旦选择了另一个选项。如果是这样

<select name="dropdown" id="dropdown" onchange="this.form.submit()">

如果正在使用jQuery，则应使用不显眼的事件处理程序change 而不是内联javascript。

$(function(){
    $("#dropdown").change( function(e) {
        this.form.submit();
    });
});

如果表单元素被动态添加到 DOM 中，请使用 on

$(function(){
    $('#testform').on( "change", "#dropdown", function(e) {
        this.form.submit();
    });
});

【讨论】：

Javascript 事件处理永远不应该内联执行。
@ChrisCox Blunt 语句后跟参数时更强大。
公平点。好的，内联事件处理程序模糊了关注点的分离，更难维护，因为它们被分散到各种模板的源中并增加了文档的膨胀，而外部文件中的不显眼的事件处理程序是可缓存的，逻辑上分离的，通常被认为是最佳实践。
这个简单的问题似乎获得了一些流量。更新了答案以包括 jQuery 替代品。 @Chris，每个人都可以编辑任何内容，因此欢迎您编辑并添加更多说明或示例。

【解决方案2】：

您将需要使用 jQuery change() 事件。

('#dropdown').change( function() { ('#testform').submit(); })

【讨论】：

【解决方案3】：

我觉得

$('#dropdown').change(function () { $('Submit').click(); } );

会成功的！

【讨论】：

【解决方案4】：

这里回答

<form name="testform" id="testform" action="test.php" method="get">
              <input name="field1" id="field1" type="text" value="">
              <input name="field2" id="field2" type="text" value="">
              <select name="dropdown" id="dropdown" onChange="document.testform.submit()">
            <option value="option1" selected="selected">option1</option>
            <option value="option2">option2</option>
            <option value="option3">option3</option>
            </select>
  </form>

【讨论】：