0

この質問が以前に尋ねられた場合は申し訳ありません。

  • シンプルな HTML テーブルがあり、jQuery を使用していくつかの非表示/非表示機能を追加しました。

  • テーブルは Chrome24.0.1312.52 mと IE8+ で正常に機能しました。

  • ただし、Firefox で Web ページを更新すると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 でページを更新すると、テーブルをデフォルトの状態に変更できます。

ただし、リセットボタンをクリックすると、フォームの内容だけがリセットされますが、その構造はリセットされます。これが例です。誰かがそれを手伝ってくれたら幸いです。ありがとう！

4

1 に答える 1

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/

幸運を！

于 2013-01-23T22:00:32.800 に答える