Question

我有一个按价格排序的下拉菜单：从低到高等等

此菜单位于我的结束表单标记之外。

如何在提交时将选择选项添加到表单？

到目前为止，我有：

<script>
 $(document).ready(function(){
 $('#sort_by').change(function(){
 $("#search_form").submit();
  });
});
</script>

因此，上述内容将在更改时提交表单，但不会添加select选项的值。如何在提交时将选择选项添加到表单？

选择菜单：

<select name="sort_by" id="sort_by">
<option value="Low to High">Low to High</option>
<option value="High to Low">High to Low</option>
</select>

Answer 1

您希望该字段成为提交表单的一部分，因此请在表单提交时将选择附加到表单。

添加克隆和隐藏以避免视觉变化。

$('#search_form').on('submit', function(){
    $('#sort_by').clone().hide().appendTo(this);
});

由于您发布的是整个页面（不是ajax），因此使用相同的ID克隆select并不会事先删除重复的克隆并不重要。

修改

虽然问题中的文字说您希望在提交时将表单添加到表单中，但是给出的代码表明您希望在更改时提交表单：

$('#sort_by').on('change', function(){
    $('#search_form').append($(this).clone().hide()).trigger('submit');
});

Answer 2

第一个解决方案是在表单中添加一个隐藏的输入字段，如下所示：

<input type="hidden" name="sort_by" id="myInput">

$('#sort_by').change(function(){
    $('#myInput').val($(this).val());
    $("#search_form").submit();
});

请记住从select

中删除name属性

如果您使用ajax函数，您还可以构建一个FormData对象并将所有数据附加到它（docs https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects）

在提交时从外部表单标记添加要表单的元素

2 个答案: