optgroupから選択したオプションの名前を保存/保存する

Question

現在、私はドロップダウンメニューを持っています。このオプションにはjsonファイルが入っています（実際のファイルにもっと多くのセットがあります）：

JSON

{ 
    "thing": { 
    "Selected thing": [ 
     { 
     "name" : "thing 1", 
     "value" : 1.0, 
     "purpose": "thing 1" 
     }, 
    ]   
    } 
}  

彼らは、以下のHTMLの中に取り込まれているスクリプトを選択します。

HTML

<tr> 
    <td><strong>Choose a Thing</strong></td> 
    <td> 
    <div> 
     <select name="thing" class="form-control" id="thing" value="{{ thing }}"> 
     <option class ="placeholder">{{ thing }}</option> 
     </select> 
    </div> 
    </td> 
</tr> 

JavaScript

$(document).ready(function() { 
    var menu = document.getElementById('thing') 
    $.getJSON("{{ url_for('static', filename='things.json') }}", function (data) { 
    $.each(data.things, function (optgroup, options) { 
     var next_optgroup = document.createElement('OPTGROUP') 
     next_optgroup.setAttribute("label", optgroup) 
     menu.appendChild(next_optgroup) 
     $.each(options, function (index) { 
     next_option = document.createElement('OPTION') 
     next_option.setAttribute("value", options[index].value) 
     next_option.setAttribute("name", options[index].name) 
     next_option.innerHTML = options[index].name 
     next_optgroup.appendChild(next_option) 
     }); 
    }); 
    }); 
}) 

したがって、現在、選択されたオプションが選択され、送信ボタンが押され、値（1）{{こと}を介してフラスコに渡され、記憶され、オプションを選択値にレンダリングされると}。

私はそれが機能するようにする必要がありますが、選択したオプションに関連付けられた名前を格納できる必要があります。私はJavaScriptや隠れた入力を使う必要があるかもしれません。私のHTMLフォーム）これを行うには、javascriptの私の知識は最小限ですが。

つまり、ページを保存して更新するには、選択したオプション名（もの1）をHTMLページに表示したままにしますか？

Answer 1

リンクに記載されているローカルストレージ（https://www.w3schools.com/html/html5_webstorage.asp）を使用して、ローカルマシン上のユーザーのブラウザにデータを格納できます。つまり、別のコンピュータからページを訪問すると、その保存されたデータにアクセスできなくなります。この情報を保持し、別のマシンやブラウザからアクセスする必要がある場合は、ライブWebサーバーにデータベースを実装し、ユーザーがページにアクセスしたときにこの情報を要求する必要があります。

ローカルストレージは使いやすいです。ページは準備ができている、あなたが構築され、「事」を選択フォーム要素を埋めた後

// Using jQuery 
$('#thing').on('change', function() { 
// Save the Value in local storage 
localStorage.setItem('userThing', $('#thing').val()); 

}); 

はストレージから値をロードするには：ここではユーザーの選択したもののための変数を設定する方法の例がある

これらのタスクは、Javascript開発者に共通しています。 GoogleのAngularJSやFacebookのReactなどのフレームワークは、これらのタスクを簡素化するために構築されています（フレームワークを学んだ後はとても簡単です...快適に使うために少し時間がかかりますが、 javascriptを使用して大規模なプロジェクトを構築する予定です）。彼らは、Webアプリケーションを開発する際に強く推奨されるMVCのパラダイムに大きく依存しています。