自动提交，一旦选择选项答案

【问题标题】：auto submit, once option selected自动提交，一旦选择选项
【发布时间】：2021-03-14 05:41:51
【问题描述】：

下面的代码有些问题。

这段代码的作用

我有许多由选择和选项组成的列表项（以下是其中一个的摘录）以及一个 type="submit" 的唯一输入

一旦选择了一个选项，用户可以单击充当过滤器按钮的输入并提交表单，然后用户将返回该搜索的目录。

我正在努力实现的目标

我希望在用户选择一个选项后立即提交输入。它需要感觉一旦被选中就会自动加载，然后用户可以选择另一个选项添加到该选项之上，然后重复该过程。

我一直在尝试使用下面的代码来完成这项工作，但没有成功。

--注意--

如果禁用该选项并显示占位符，我不希望提交表单。
如果有一种干净的 JavaScript 方式也可以作为解决方案。

jQuery(document).ready(function($){
  $("select").change(function () {
    $("select").data("changed",true);
  });
  if ($("select").data("changed")) {
    $("#search").click();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>

<strong>Gender:</strong><br>

<select id="gender" name="gender">

<option name="gender[]" value="0"> </option>
<option value="" disabled="" selected="" hidden="">Select Gender</option>
<option name="gender[]" value="female"> Female</option>
<option name="gender[]" value="male"> Male</option>
<option name="gender[]" value="trans"> Trans</option>

</select>                       
</li>


<input id="search" name="theForm" class="filterBtn" type="submit" value="Filter">

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

你需要做的就是将if里面的语句移动到select事件处理函数的回调函数中。

此外，如果您有多个选择，如果您打算在其他地方使用它，请务必将 data changed 清除为 false 就在 $(this).data('changed', true); 行的上方/下方。

您所做的问题是，在进行选择时 if 条件不会被执行。页面加载时只执行一次。

jQuery(document).ready(function($){
  $("#gender").change(function () {
    $(this).data("changed",true);
    $("#search").click();
  });
  $('#search-form').on('submit', function (ev) {
    ev.preventDefault();
    alert('searching');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>

<strong>Gender:</strong><br>

<select id="gender" name="gender">

<option name="gender[]" value="0"> </option>
<option value="" disabled="" selected="" hidden="">Select Gender</option>
<option name="gender[]" value="female"> Female</option>
<option name="gender[]" value="male"> Male</option>
<option name="gender[]" value="trans"> Trans</option>

</select>                       
</li>

<form id="search-form">
<input id="search" name="theForm" class="filterBtn" type="submit" value="Filter">
</form>

【讨论】：