html - HTML select タグで選択された値を保持する

Question

顧客が注文の上にチップを渡す方法を作成しています。ただし、合計を「更新」すると、選択値は常に $0 に戻ります。ページが更新されても、ユーザーが選択したヒントが表示されるように値を保持する方法はありますか?

選択タグに「選択済み」属性があることは知っていますが、それをどのように機能させるかはわかりません。

Answer 1

ヒント選択メニューの変更イベントでは、Cookieを設定するか、ローカルストレージを使用して、その方法で値を保存できます。次に、DOMの準備ができたら、Cookieまたはローカルストレージの値を読み取り、選択メニューを更新します。

httpトラフィックを気にしない場合は、同じ変更イベントハンドラーでサーバーにajax呼び出しを行い、セッション変数を設定することもできます。次に、HTMLを出力するときにselected、セッション変数に一致するオプションにプロパティを適用できます。

テストされていませんが、次のようなものが機能するはずです。

$(function(){
    var savedTip = localStorage.getItem('tipVal');
    if (savedTip) {
        $('#tip').val(savedTip);
        localStorage.removeItem('tipVal'); // garbage collection
    }

    $('#tip').on('change', function(e) {
        localStorage.setItem('tipVal', $(this).val());
    });
});