jquery 序列化或提交表单不适用于 firefox 中的选定选项

Question

我有一个问题，找不到任何解决方案。也许有人有类似的问题。这是表格:

<form class="filter-form" name="filter_form" action="[url]" method="POST">

<select name="active_filter" style="display: none;">
    <option value="all">All</option>
    <option value="active">Active</option>
    <option value="inactive">Inactive</option>
</select>


<select name="date_filter" style="display: none;">
    <option value="date_desc">Desc</option>
    <option value="date_asc">Asc</option>
</select>


</form>

我正在使用 jQuery 在选项上设置 selected="selected"(我必须这样做，因为我设置了“下拉列表”的样式)。 jQuery 表单看起来像这样:

<form class="filter-form" name="filter_form" action="[url]" method="POST">

<select name="active_filter" style="display: none;">
    <option value="all">All</option>
    <option value="active" selected="selected">Active</option>
    <option value="inactive">Inactive</option>
</select>

<select name="date_filter" style="display: none;">
    <option value="date_desc">Desc</option>
    <option value="date_asc" selected="selected">Asc</option>
</select>

</form>

然后我跑了

$(".filter-form").serialize();

或者只是提交表单

$(".filter-form").submit();

我只收到第一个选项元素的响应:

"active_filter=all&date_filter=date_desc"

此问题仅在 Firefox 中出现。我真的很感激任何帮助。谢谢。

附言抱歉我的英语不好^^,

Answer 1

style="显示:无；"

这是个问题

改为将它们设置为 visibility:hidden 和 position:absolute。这些字段将不会发送到带有 display:none 的服务器，但会带有 visibility:hidden。通过同时将“position”切换为“absolute”，您应该会获得相同的视觉效果。