表单内的下拉列表....如何在没有按钮的情况下触发操作？答案

【问题标题】：drop down list inside form.... how to trigger the action without button?表单内的下拉列表....如何在没有按钮的情况下触发操作？
【发布时间】：2012-10-08 21:05:37
【问题描述】：

<form id="form1" name="form1" method="post" action="foo.php">

  sort by:
  <select>
  <option name="date">sort by date</option>
  <option name="name">sort by name</option>
  <option name="price">sort by price</option>
  </select>

</form>

我想要的是，当我选择一个选项时，表单中的操作将自动执行？所以简而言之我选择的内容将通过 $_POST 在 foo.php 中发送。我不想让输入按钮执行操作。

我需要 Javascript 来实现这一点吗？你能告诉我这样做的代码吗？如果它需要javascript那么如何

【问题讨论】：

google.com/search?q=js+submit+form+select+change

标签： php html

【解决方案1】：

你需要 javascript。

虽然您应该使用unobtrusive javascript，但基本代码如下所示：

<select onChange="document.forms['form1'].submit();">

您将事件处理程序附加到change 事件并让它提交表单。

【讨论】：

如果 javascript 关闭了我应该做些什么来进行排序？
@user1729997 你不能。如果 javascript 关闭，则需要由访问者手动提交表单（使用按钮等）。
如何建立一个将由 PHP 中的 GET 处理的排序链接
@user1729997 当然可以，但是每个选项只有一个链接，而不是select 元素。这不能很好地扩展。
@jeroen 您还可以发布附加事件的 javascript 代码吗？我现在真的很需要它，我保证我以后会学习它。

【解决方案2】：

这将需要 JavaScript，但如果您愿意使用 jQuery，那么这真的很容易。使用 jQuery 会是：

$('#form1 select').on('change', function() {
  $('#form1').submit();
});

在 JavaScript 中，您将绑定 select 元素的 onChange 事件。一种方法是：

<select onChange="document.form1.submit()">

【讨论】：

如果他不知道如何用普通的 JS 执行这个操作，我认为他还没有准备好一个框架。
我不知道我是否同意 jQuery 的这种方法。我只是在教人钓鱼，但 jQuery 感觉就像是 JavaScript 的好部分减去了 DOM 的一些坏部分:)
我猜这是真的。我投了你一票，因为你展示了两种解决方案。
我完全同意这个任务本身不值得包括 jQuery。

【解决方案3】：

最简单的方法是直接在您的选择元素中使用 javascript。该事件是 onChange。

 <select onchange="javascript:document.form1.submit();">

您也可以使用基于 jQuery 的表单。从http://jquery.com/ 下载 jQuery javascript 并将其包含在您的 HTML 中。之后，使用：

 <select id="sort">

而且，在你的内部：

 $(document).ready(function(){
           $("#sort").change(function() {
                    $(this).parent().submit();
           });
 });

【讨论】：