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="display: none;"

这是个问题

将它们设置为 visibility:hidden 和 position:absolute。这些字段将不会以 display:none 发送到服务器，但会以可见性：hidden 的形式发送。通过将“位置”切换为“绝对”，您应该获得相同的视觉效果。

Answer 2

在 Firefox 中测试，运行良好。

$(function(){
    $("#disp").text($(".filter-form").serialize());
});

这里是演示：http://jsfiddle.net/ashishanexpert/m8uXd/