jquery - 刷新网页不会在 Firefox 中使用 jQuery 活动重置 HTML 表

Question

对不起，如果这个问题以前被问过。

• 我有一个简单的 HTML 表格，并通过 jQuery 添加了一些隐藏/取消隐藏功能。

• 该表在 Chrome24.0.1312.52 m和 IE8+ 中运行良好。

• 但是，当我在 Firefox 中刷新网页时15.0.1，之前填写的表格不会被重置。以前有人有过这种经历吗？我需要添加一些东西让 jQuery 重置表单吗？

下面是我的代码和jsfiddle的链接。感谢您的任何建议！

HTML：

<table>
    <tr>
        <th>
            <label for="id_application">Application:</label>
        </th>
        <td>
            <select name="application" id="id_application">
                <option value="">Make a selection</option>
                <option value="a">Aerial</option>
                <option value="b">Ground</option>
                <option value="c">Orchard/Airblast</option>
            </select>
        </td>
    </tr>
    <tr>
        <th>
            <label for="id_boom_height">Boom height:</label>
        </th>
        <td>
            <select name="boom_height" id="id_boom_height">
                <option value="">Make a selection</option>
                <option value="1">Low</option>
                <option value="2">High</option>
            </select>
        </td>
    </tr>
    <tr>
        <th>
            <label for="id_orchard_type">Orchard type:</label>
        </th>
        <td>
            <select name="orchard_type" id="id_orchard_type">
                <option value="">Make a selection</option>
                <option value="1">Vineyard in leaf</option>
                <option value="2">Orchard or dormant vineyard</option>
            </select>
        </td>
    </tr>
</table>

JS

 $(document).ready(function () {
        $('#id_boom_height').closest('tr').hide();
        $('#id_orchard_type').closest('tr').hide();

        $('#id_application').change(function () {
            $('#id_boom_height').closest('tr').hide();
            $('#id_orchard_type').closest('tr').hide();
            if ($(this).val() == "b") {
                $('#id_boom_height').closest('tr').show();
                $('#id_orchard_type').closest('tr').hide();
            } else if ($(this).val() == "a") {
                $('#id_boom_height').closest('tr').hide();
                $('#id_orchard_type').closest('tr').hide();
            } else if ($(this).val() == "c") {
                $('#id_boom_height').closest('tr').hide();
                $('#id_orchard_type').closest('tr').show();

            }
        });
    });

更新：

感谢 Hanlet Escaño 的帮助。我在表格中添加了一个重置​​按钮并将其绑定到页面刷新。因此，当我在 Firefox 中刷新页面时，我能够将表格更改为其默认状态。

但是，当我单击重置按钮时，只有表单的内容被重置，但它的结构。这是示例。如果有人可以帮助我，我将不胜感激。谢谢！

Answer 1

我在相同版本的 Firefox 上尝试过，但没有收到您的错误。但是，我已经稍微修改了您的代码，以便在人们离开页面时重置表单。在您弄清楚出了什么问题之前，这是一种解决方法。

HTML：

<table>
    <tr>
        <th>
            <label for="id_application">Application:</label>
        </th>
        <td>
            <select name="application" id="id_application">
                <option value="">Make a selection</option>
                <option value="a">Aerial</option>
                <option value="b">Ground</option>
                <option value="c">Orchard/Airblast</option>
            </select>
        </td>
    </tr>
    <tr>
        <th>
            <label for="id_boom_height">Boom height:</label>
        </th>
        <td>
            <select name="boom_height" id="id_boom_height">
                <option value="">Make a selection</option>
                <option value="1">Low</option>
                <option value="2">High</option>
            </select>
        </td>
    </tr>
    <tr>
        <th>
            <label for="id_orchard_type">Orchard type:</label>
        </th>
        <td>
            <select name="orchard_type" id="id_orchard_type">
                <option value="">Make a selection</option>
                <option value="1">Vineyard in leaf</option>
                <option value="2">Orchard or dormant vineyard</option>
            </select>
        </td>
    </tr>
</table>

<button onclick="$('#id_application>option:eq(0)').attr('selected', true);  $('#id_application').change();">Try</button>

jQuery：

$('#id_boom_height').closest('tr').hide();
        $('#id_orchard_type').closest('tr').hide();

        $('#id_application').change(function () {
            $('#id_boom_height').closest('tr').hide();
            $('#id_orchard_type').closest('tr').hide();
            if ($(this).val() == "b") {
                $('#id_boom_height').closest('tr').show();
                $('#id_orchard_type').closest('tr').hide();
            } else if ($(this).val() == "a") {
                $('#id_boom_height').closest('tr').hide();
                $('#id_orchard_type').closest('tr').hide();
            } else if ($(this).val() == "c") {
                $('#id_boom_height').closest('tr').hide();
                $('#id_orchard_type').closest('tr').show();

            }
        });

$(window).bind('beforeunload',function(){
    $('#id_application>option:eq(0)').attr('selected', true);
    $('#id_application').change();
});

JSFiddle：http: //jsfiddle.net/wLnyu/6/

祝你好运！